#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50

    Formatting jQuery tooltip using tooltipClass overridden?


    I am pretty new to jQuery. I'm trying to use the jQuery-UI tooltip feature for the first time.

    http://api.jqueryui.com/tooltip/

    When I try to customize the appearance, the base theme seems to be overriding my specification.

    Here's a functional code snippet.
    PHP Code:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>JQuery Custom Tooltip</title>
    <
    style type="text/css">
      .
    customTooltip {background-image:nonebackground-color:#ffc; color:#633; width:12em; border:#ccc solid 0.1em; padding:0.3em; border-radius:0.4em; box-shadow:0.3em 0.3em 0.3em #999}
    </style>
    </
    head>
    <
    body>
    <
    h1>jQueryTest Custom ToolTip</h1>
    <
    p><label for="theInput">Text to Enter: </label>
    <
    input type="text" id="theInput" name="School" size="30" maxlength="30" title="Enter your text here."/></p>
    <
    link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
    <
    script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script><script type="text/javascript">
          $(function() {
            $( "[title]" ).tooltip({tooltipClass:'customTooltip'});
        });
    </script>
    </body>
    </html> 
    To summarize:
    • I have an input field with the title attribute set. The title is the tooltip.
    • I included the jquery base and jquery-ui.js
    • I attached the tooltip() using the jQuery selector $("[title]") so it only applies to items on the page with a title.

    Everything a-okay to this point. I get the tooltip.
    • I add the tooltip parameter {tooltipClass:'customTooltip'}
    • I add some custom formatting, background-color, (font) color, width, etc.

    Everything is still a-okay.
    • I add the base theme (because I want that for other jQuery UI items).


    The background color of the tooltip changes to white and font color changes to black.
    The rest of the CSS features (width, box-shadow, border-radius) from my customTooltip class remain. So, obviously, the class is still being applied.
    But the background-color from something in the base theme is overriding my custom class's background-color.

    I did read that the background is implemented as an image and that you have to specify background-image:none to specify the color.
    http://bugs.jqueryui.com/ticket/8706

    But that made no difference to this issue.

    The behavior is consistent across Chrome, FF, and Opera.

    I didn't want to, but for kicks for the first time ever, I tried !important after the background-color. It didn't make a difference.

    I tried applying the background-color to .ui-tooltip, but that didn't help.

    Any other ideas?

    I don't want to roll a whole theme. I just want a little color on the tooltip to offset it from the background.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    203
    Rep Power
    31
    The order. I think CSS respects that

    Try put styling and script back to head section and re-order them Something like this:
    PHP Code:
    <head>
    ...
    <!-- 
    JQUERY BASE CDN -->
    <
    script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    ...
    <!-- JQUERY UI CDN -->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
    ...
    <!-- PAGE SPECIFIC -->
    <style type="text/css">
      .customTooltip {background-image:none; background-color:#ffc; color:#633; width:12em; border:#ccc solid 0.1em; padding:0.3em; border-radius:0.4em; box-shadow:0.3em 0.3em 0.3em #999}
    </style>
    <script type="text/javascript">
      $(function() {
        $( "[title]" ).tooltip({
          tooltipClass:'customTooltip'
        });
      });
    </script>

    </head> 

    Comments on this post

    • EEsterling agrees
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50
    Ah yes. Thank you!

    There's a reason I had them in that order in the original file. But I'll have to review that and figure out how to reposition the base CSS location.

IMN logo majestic logo threadwatch logo seochat tools logo