JQuery: Show tooltip without link

Question

Can I show a tooltip without a link?

For example, I have the following code without a link:

<ul class="letters" title="This is the title"> <li>A</li> <li>B</li> <li>C</li> </ul> 

So, how can I show the " This is the title " tooltip when I am targeting it?

Btw, I do not want to use any popup plugin.

Answer 1

You make your life a little more complicated by saying that you don’t want to use any work that other people have already done. :-)

Some of the components:

• You can find all ul elements with the title attribute via $ or jQuery :

   var targets = $("ul[title]"); 

• You can view them for the mouseenter event, and if the mouseleave event mouseleave not fire for X milliseconds, show your prompt. (These are IE-specific events, but jQuery provides them in all browsers, which is very useful. It also provides hover , which is just a convenient tool for connecting mouseenter and mouseleave .) Although this means that you are connecting a large number of event handlers (since mouseenter and mouseleave not a bubble - part of what makes them so convenient). You might be better off tracking the mouseover / mouseout at the document level and handle the complications as they bubble up.

• To show your hint, you can get the location of the corresponding element (via offset ) and show the absolutely located div next to it containing the title (which you can get through attr ).

• When the user pulls the mouse out of the tooltip ( mouseleave ), delete it.

But again, you might think about using code from a project that already did this, found all the wrinkles, etc. Read the code first to make sure it does what you want and not what you don’t need, but reinventing the wheel is usually (not always!) A waste of time ... Even if you don’t actually use the plug-in Read to find out what might be helpful.

Answer 2

Get title attribute

 title = $('.letters').attr('title'); 

And work from there. There is no magic title_tooltip_popup () function in jQuery, so you might consider creating your own or using a plugin.

---

Remember that if you work with classes of this selector

 $('.letters') 

can refer to more than 1 element