Creating Inline Tooltips

Creating Inline Tooltips

Would you prefer that the tooltip text be displayed within your web page immediately after the term that it refers to?

To implement tooltips we first need to add the following Javascript code to the head of our page:

function toggleInline(t) {

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:

.intip {font-style:italic;font-weight:bold;display:none;}

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:

<a href="#" onmouseover="toggleInline('tt1');"

onmouseout="toggleInline('tt1');">link </a>

To use onclick you code it like this:

<a href="#" onclick="toggleInline('tt1');">link </a>

We then follow the link with the tooltip code like this:

<span id="tt1" class="intip"> tooltip text</span>

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.

Enjoy the result!