Question

Is it possible to show a tooltip without making 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 tooltip “This is the title” when I mouse over on it?

Btw, I don’t want to use any tooltip plugin.

Answer 1

You’re making your life a bit harder saying you don’t want to take advantage of any work that other people have already done. 🙂

Some of the component parts:

• You can find all of the ul elements that have a title attribute via $ or jQuery:

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

• You can watch them for the mouseenter event and, if no mouseleave event fires within X milliseconds, show your tooltip. (These are IE-specific events, but jQuery provides them on all browsers, which is very helpful. It also provides hover, which is just a convenience means of hooking up mouseenter and mouseleave handlers.) Although this means you’re hooking up a lot of event handlers (since mouseenter and mouseleave don’t bubble — part of what makes them so handy). You may well be better off tracking mouseover/mouseout at the document level and handling the complexities that arise, since they do bubble.

• To show your tooltip, you can get the location of the element in question (via offset) and show an absolutely-positioned div nearby containing the title (which you can get via attr).

• When the user moves the mouse out of the tooltip (mouseleave), remove it.

But again, you might consider using the code from a project that’s already done this, found all the wrinkles, etc. Read through the code first to make sure it’s doing what you want and not something you don’t want, but reinventing the wheel is usually (not always!) a waste of time… Even if you don’t actually end up using the plug-in, reading through to see what the pitfalls are might be useful.