Why is my Jquery Tooltip not working?

Question

I am not getting a tooltip to work and I think the problem is with my selector. I had selected a plugin that is located here: http://flowplayer.org/tools/tooltip/index.html It says that you can use the title attribute of an element as the selector. I am wanting to select menu items and attach a tooltip to each one (to describe the menu links). It seemed that the easiest way to do this is to use the title attribute. I only need to fit about 10 or less words in each tooltip. Before describing what could be the problem, let me also mention a couple things.

I have on the page a JQuery accordion too, from the jqueryui.com site. That link to the jqueryui is placed after the call to the jquery tools from http://flowplayer.org/tools/tooltip/index.html . I thought this was the jquery ui at first but jqueryui doesn't have a tooltip - though they have a dialog box that is similar but I don't need the header, just room for a few words.

So, let's see where I could have went wrong. A) The call to the jquery tools comes before the call to the jqueryui. When that was reversed, my accordion didn't work.

B) The plugin documentation says that there is a class.tooltip which is available by default and the code also let me set the class for the tooltip to tooltip. It is definitely not getting any of the styling that I setup for the tooltip. I'm not sure how to confirm that this tooltip class exists because it only shows up when the tooltip appears.

C) My selector. At first I tried a CSS Descendant selector, just like I would in CSS. I even added a containing div with id of tooltip.

1)First selector: $('#tooltip a[title]), to get the a tags that have a title attribute. That was described in the documentation, though to me it seems like you would want to "trigger" on the anchor tag, not it's title attribute 2) Second attempt with descendant selectors $(".art-hmenu a.tt[title]") - I have inside the tag that has a class of art-hmenu an anchor tag with class tt and I want the title attribute. - didn't work. 3) lastly, I tried using ("#tooltip").find('a[title]') - thinking this would find the anchor tag with title attribute. The documentation page says that this code will take advantage of the element's title attribute: $("img[title]").tooltip(); That might put a tooltip on every img tag, wouldn't it? My first example above is similar in using ("#tooltip a:[title]") which doesn't work. Maybe the title shouldn't be on the anchor tag but instead on the li tag. I could use some help figuring this out - wherever the problem might lay, which I think is how I am making my selection. Thanks, Bruce

Answer 1

your looking for an attribute so use the $('#tooltip a').attr("title") instead.

Answer 2

It sounds like you are over-complicating this. Give the link, phrase, input, button the class of "trigger" and a title. Tools will handle everything else. You can style the tooltip with a.tooltip class. You position the tooltip with the offset and position settings. If you want to get crazy with styling you can layout: or open the plugin source code and wrap html around the Append(title).