I'm trying to create a tooltip for a few radio button options on a page. I've got the tooltips displaying the [title] attribute easily enough, but I want to selectively format the tooltip text in a couple elements. I know I can provide content as HTML, and I've created some classes to style the content, but now the tooltips are no longer showing. I think my problem is that I am not specifying the "items" option properly. In fact, I'm not quite sure how to define my html "content" option as an item at all. Halp plays!

JS

$('#tooltip').tooltip({
    tooltipClass: "tooltip-class"
    items: what do?
    content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"
});

HTML selected by JS

<a href="#" id="tooltip" class="link-info"></a>

Thanks for reading. :)

UPDATE:

Ok! I figured it out... kinda. I was encasing my strings improperly: "<>"bad code"<>" . The solution to my problems with the content option was to put my html inside a variable and set it to content. JQuery seems to have liked that much better. My styles are showing up properly for the tooltip, but for some reason it is only working on one of three items selected for tooltips. There's nothing in the console that indicates it shouldn't work. No syntax errors, I'm selecting the correct id. I'm so confused.

I'm trying to create a tooltip for a few radio button options on a page. I've got the tooltips displaying the [title] attribute easily enough, but I want to selectively format the tooltip text in a couple elements. I know I can provide content as HTML, and I've created some classes to style the content, but now the tooltips are no longer showing. I think my problem is that I am not specifying the "items" option properly. In fact, I'm not quite sure how to define my html "content" option as an item at all. Halp plays!

JS

$('#tooltip').tooltip({
    tooltipClass: "tooltip-class"
    items: what do?
    content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"
});

HTML selected by JS

<a href="#" id="tooltip" class="link-info"></a>

Thanks for reading. :)

UPDATE:

Ok! I figured it out... kinda. I was encasing my strings improperly: "<>"bad code"<>" . The solution to my problems with the content option was to put my html inside a variable and set it to content. JQuery seems to have liked that much better. My styles are showing up properly for the tooltip, but for some reason it is only working on one of three items selected for tooltips. There's nothing in the console that indicates it shouldn't work. No syntax errors, I'm selecting the correct id. I'm so confused.

• javascript
• jquery
• html
• css
• tooltip

Share Improve this question Follow edited Mar 21, 2013 at 20:18 Ryan Taylor asked Mar 21, 2013 at 16:19 Ryan TaylorRyan Taylor 28122 gold badges55 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

I think I know what you are running into. When you use the content option you still have to include the title attribute on the element OR specify the items option as something different.

I have NO IDEA why the jQuery team decided to do this, as it seems the selector you are applying the tooltip to, would be the same thing used for the items option. Quite duplicative.

Anyway, you can change the content but make sure the element you are applying a tooltip to has the title attribute or you specify the items option with a selector which could simply match the selector you are applying the tooltip to. Odd indeed.

Example: $('#selector').tooltip({ content: 'your content', items: '#selector' });

when you have problems with quotes, you have many options, like you said:

1. use another variable as you finally did

2. escape the "inner" qoutes with backslashes like this:

   $('#tooltip').tooltip({
       tooltipClass: "tooltip-class",
       items: "what do?",
       content: "<div class=\"tooltip-header\">header</div><div class=\"tooltip-description\">text</div>"
   });
   

3. bine single and double quotes:

   $('#tooltip').tooltip({
       tooltipClass: "tooltip-class",
       items: "what do?",
       content: '<div class="tooltip-header">header</div><div class="tooltip-description">text</div>'
   });
   

you second problem after UPDATE: if you have created your link with id and you are applying tooltip with id selector

<a href="#" id="tooltip" class="link-info"></a>

there can be only one link with same id in one html page! so if you declared more links with the same id, most likely it wont work.

content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"

This produces a syntax error.

Please do the following:

• learn how to use your browser’s JS error console
• learn the absolute basics of the JS syntax, and how to operate with strings/text literals