What is the easiest way to create an HTML mouseover tool tip?

What is the easiest, cleanest way to create an HTML mouseover tool tip without using JavaScript?

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

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


Solution 1:

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.

Solution 2:

If you don't care much what the tooltip looks like you can always just use the "title" attribute