CODEWITHSUNDEEP
javascriptjqueryhtmlcsstooltip
Ryan Taylor
Ryan Taylor

Reputation: 281

How to define JQuery UI tooltip items option for styling content

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.

Upvotes: 3

Views: 8292

Answers (3)

betatester07
betatester07

Reputation: 691

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. combine 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.

Upvotes: 2

CoryDorning
CoryDorning

Reputation: 1914

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' });

Upvotes: 10

C3roe
C3roe

Reputation: 96241

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

Upvotes: 1

Related Questions