How to define JQuery UI tooltip items option for styling content

css, html, javascript, jquery, tooltip

Solution

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

Problem

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.

Original source