jQuery - How to display a simple tooltip when the user's mouse hovers on top of a hyper-link?

Question

Hello all,

I have designed a website navigation as follows:

Home | Login | Help

When the user's mouse hovers on top of the item (i.e. Home or Login or Help), I would like to show a simple tooltip such as (Go to Homepage, or Please Login in, etc.)

How can I do this in jQuery without any plugin?

Thank you

Answer 1

You can specifity the title='tooltip' in the tag definition in the html

Answer 2

Why would you want to do it without a plugin?

Unless you insist on re-inventing the wheel I'd suggest jQuery Tools Tooltip.

There are also several questions on this topic already.

Answer 3

No need for jQuery - simply edit your HTML: You can use the title attribute of the a element (the link), for example:

<a href="loginPage" title="Please Login">Login</a>

Answer 4

There are many jQuery plugins for tips. I really like QTip and for a simpler version VTip.

Answer 5

There are several jQuery plugins for this, among them QTip, VTip and jQuery Tools Tooltip and I'd really recommend using one of them instead of reinventing something others have already invented.

However, I recommend you use the title attribute as a fallback option for browsers without javascript. You can easily take the text from the attribute and feed it to the plugin, and then remove the attribute using jQuery.