95

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!"

isherwood
  • 58,414
  • 16
  • 114
  • 157
stackoverflow
  • 18,348
  • 50
  • 129
  • 196

2 Answers2

179

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.

Cristian Ciupitu
  • 20,270
  • 7
  • 50
  • 76
Samich
  • 29,157
  • 6
  • 68
  • 77
  • 7
    The 'title' attribute also works in elements, so you can easily display a simple mouse-over tooltip over text. – codesniffer Jan 17 '21 at 20:36
  • 1
    Don't do this! It's not accessible for keyboard or screen reader users. More info: https://www.mediacurrent.com/blog/dont-rely-title-attribute-accessibility-seo and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role – samspot Sep 30 '22 at 16:04
24

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

Jaime Garcia
  • 6,744
  • 7
  • 49
  • 61
  • 1
    Don't do this! It's not accessible for keyboard or screen reader users. More info: https://www.mediacurrent.com/blog/dont-rely-title-attribute-accessibility-seo and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role – samspot Sep 30 '22 at 16:04