What is the easiest way to create an HTML, mouse over tool tip?

html tooltip
stackoverflow picture stackoverflow · Sep 21, 2011 · Viewed 59k times · Source

What is the easiest, cleanest way to create an HTML, mouse over tool tip without using tons of extra js references?

<img id=Pennstate src="/blah" style="cursor:pointer;">

mouse over that and have a a nice tooltip "We are Pennstate!"

Answer

Samich picture Samich · Sep 21, 2011

The easiest way is to use the native HTML title attribute:

<img src="https://stackoverflow.com/favicon.ico"
     style="cursor:pointer;"
     title="Stack Overflow">

But if you need more, try the tooltip widget provided by jQuery UI since version 1.9.

Related questions

Add a tooltip to a div

I have a div tag like this: <div> <label>Name</label> <input type="text"/> </div> How can I displaying a tooltip on :hover of the div, preferably with a fade …

Read More
tooltips for Button

Is it possible to create a tooltip for an html button. Its the normal HTML button and there is no Title attribute as it is there for some html controls. Any thoughts or comments?

Read More
How can I use a carriage return in a HTML tooltip?

I'm currently adding verbose tooltips to our site, and I'd like (without having to resort to a whizz-bang jQuery plugin, I know there are many!) to use carriage returns to format the tooltip. To add the tip I'm using the …

Read More