Posts Tagged ‘tooltip’

Techie Tip of the Week: Use “title” to add tooltips to web pages and web content!

Friday, May 25th, 2012

Ever wish you could add a tooltip to add more information on an object on your web page? This week’s tip will show you how!

Tooltips are those little boxes of information that pop up when your mouse hovers over a link, picture,niece of text, or other object.

To create a tooltip on a web page:

  1. In your web page editor, make sure you can see and edit the HTML code. (If you are using Drupal, WordPress, or other content management system, you’ll need to click the HTML or Source button.)
  2. Locate the object in which you wish the tooltip to occur.
  3. Add the following code:title="Tooltip Text"

So, for example, to add a tooltip saying “photo of our group” to a picture of our staff, the code would look like this:
<img src="ourstaff.jpg" title="photo of our group">
And here’s how it would look:

Or if I wanted to add a tooltip to a link sending the visitor to Stanford’s home page:
<a href="">Return to Stanford</a>

Or to add a title to a paragraph:

<p title="all about widgets">this paragraph is about the study of widgets</p>