html: add a mouse hover “tooltip” to a link.

Here’s a little code snippet you can add to a link so that when someone hovers their mouse over the link, a “tooltip” is displayed, giving them more information. In the example shown in this post, the image of Dorothy looking out her window is a link to download an audio clip of the theme of the Wicked Witch. The tooltip displays the post’s title “free ringtone: wicked witch of the west” when the mouse hovers over the image.

A simple way to add a tooltip to an image link is to include the following to your link code:

<span title=”your tooltip language goes here”></span>

For an example of how this was used in the image above, check out the sample “before” and “after” code below. First, here’s the link code withOUT the <span title> code:

<a href=”https://pragmaticcomputing.wordpress.com/2016/08/24/html-add-a-mouse-hover-tooltip-to-a-link/wordpress-post-displaytooltiponhover/”&gt; <img style=’border:1px solid #000000;’ src=”https://pragmaticcomputing.files.wordpress.com/2016/10/wordpress-post-displaytooltiponhover.png?w=474&#8243; width=”474″ height=”700″ class=”alignnone size-large wp-image-685″ /></a>

This is the “after” code, including the tooltip code and text. (I’ve shown the code in red to highlight it here, coloring is not required.)

<a href=”https://pragmaticcomputing.wordpress.com/2016/08/24/html-add-a-mouse-hover-tooltip-to-a-link/wordpress-post-displaytooltiponhover/”&gt; <span title=”free ringtone: wicked witch of the west”><img style=’border:1px solid #000000;’ src=”https://pragmaticcomputing.files.wordpress.com/2016/10/wordpress-post-displaytooltiponhover.png?w=474&#8243; width=”474″ height=”700″ class=”alignnone size-large wp-image-685″ /></span></a>

Save

To add a tooltip to text, it’s even simpler:

<span title=”your tooltip language goes here”>Text to be hovered over.</span>