How to Create a Tooltip for a Hyperlink
On occasion, it may become necessary to provide additional information about the links in your website via a “ToolTip”, which is additional information that is displayed when the cursor hovers over an object. For instance, you may have two links that are very similar to one another, and the one or two word title of the link just sufficient enough to describe what it is. This is when tooltips may be useful. In this tutorial you will learn how to create a tooltip.
How does a Tooltip Work?
Tooltips are designed to work in conjunction with a hypertext link. Whether this is a link to a different website altogether, or it is just a navigational link to another page in your current site, the syntax remains the same. To apply a tool tip you add one additional attribute to the standard reference tag with the “href” pointing to the file.
The following HTML source code demonstrates the syntax for the Tooltip attribute:
<title>Creating a Tooltip</title>
<h2 style="text-align: center;">Tooltip Example</h2>
<p style="text-align: center;">This is a demonstration of the HTML tooltip function <br />
Hoover over the following hypertext link to see the tooltip on action</p>
<h2 style="text-align: center;"><a href="" title="Tooltips help provide additional information about the hypertext link it is attached to.">
This is a Hyperlink</a></h2>
A Few Last Words
The tooltip attribute is not supported by every browser. Be sure to consider this when placing critical information in the tooltip, as some users may not have access to it, and there is no assurance that even if it IS visible, that the user will pay attention to it. While the ToolTip can be useful, you should never rely on it for the relaying of crucial information. Join us next time for additional HTML tutorials.