A hovertip is a kind of " tooltip" that appears when the mouse rests above something. Try hovering over the word "hovertip" in that last sentence to see what we mean. (Words that are hovertips are automatically italicized.) To put a hovertip in a page:
My Hovertip
This is my cool hovertip! I can put anything in this hovertip that I want, include paragraphs, hyperlinks, images, etc. Everything just has to be between the "div" tags! And the look of the hovertip is governed by a style sheet. For example, I put "My Hovertip" in H1 and the style sheet we happen to be using translated that in to a banner of sorts.
Turn on the hovertip module
- Go to Sight building and select 'hovertip'. Save Configuration
Use this code to insert a hovertip
To turn something into a hovertip, you have to put a special "span" HTML tag around the word(s) you want the user to hover over in order to see that tip.
First, in the actual HTML code for your page, put the following code (shown in red) around the word(s) you want to become the hovertip:
<span hovertip="htdef"> The word(s) you want to become the hovertip. </span>
Next, type in the text you want to have appear in the pop-up window by using the following code shown in red:
<div id="htdef"> This is the text for my pop-up window. </div>
* NOTE: If you want to have more than one hovertip per page, give each hovertip a unique name (shown highlighted above).
Example of hovertips used in a course
See an example of this used in GEOG 432.
* NOTE: Your hovertip text will show up in the Drupal editing window as part of your page...but won't actually show unless one hovers over the corresponding word/phrase in the published page.