Inline Tooltips
Join the Discussion
Don't like the idea of tooltips that appear in a separate layer hovering over your page? Would you prefer that the tooltip text be displayed within your web page immediately after the term that it refers to? Take a look at the next two paragraphs and you will see two ways that such inline tooltips might work.
This is a test to see if it works of the inline tooltip using onmouseover/onmouseout.
This is a test to see if it works of the inline tooltip using onclick.
To implement these tooltips we first need to add the following Javascript code to the head of our page:
var x = document.getElementById(t).style;
if (x.display == 'inline') x.display = 'none';
else x.display = 'inline';
return false;
}
We also need to add the following stylesheet entry into the head of our page:
The next step is to code the link around the text we want to associate the tooltip with. To use onmouseover/onmouseout you code it like this:
onmouseout="toggleInline('tt1');">link </a>
To use onclick you code it like this:
We then follow the link with the tooltip code like this:
You can have multiple tips on the page, you just need to give each its own unique id. The id on the span also needs to match with the id passed as a parameter to the toggleInline function of the preceding link. You can also use whatever you want for the text of the link that the tip is attached to as well as the text of the tip itself. If you don't want the tip to be in bold/italic then change the stylesheet entry, as long as the display:none entry is there the code will still work.
