Adding tooltips (hover text) to Blogger posts

This article is about putting a "tooltip" (text that is shown when you hover over) into an URL in a Blogger post.

What are tooltips?

Tooltips are a feature found in many websites and GUI-based tools:  when a viewer hovers their mouse over an item, a small piece of text is shown which explains the item.
You can see them in Blogger's Post Editor when you put your mouse over an item in the toolbar.

But tool-tips can be used on other things too, including pictures and text: put your mouse over This Text to see one.

They can be particularly useful if you want to provide a translation for a few words from another language, or a definition for technical terms, but don't have enough to make a glossary worthwhile.

How to add a tool-tip in Blogger

Open the Post (etc) that you are working on.
1  Create the item that you want the tool-tip to be on (it may be text or a picture).
2  Select the item, and use the Link button on the toolbar to set up a link for it.  (Do this even if you don't want it to end up linked to anything - you can remove the link part alter on.)
3  Go into Edit HTML mode (top right side of the editor toolbar), and find the HTML for the item.  

Hint:  use the find feature in your brower - it may be helpful to temporarily put some marker text, eg XXX, just before and after the item.

The HTML for the item will have this sort of structure:

<a href="Your Link" > Your item text ... </a>

or it may be like this if your item is a picture:

<img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" />

or even like this if it's a picture that's linked:

<a href="Your Link" img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" </a>

4  Add  title="YOUR HOVER TEXT" to the HTML, so it becomes something like:

<a href="Your Link" title="YOUR HOVER TEXT" > Your item text ... </a>

or, if the item is a picture:

<a href="Your Link" img border="0" src="URL FOR YOUR PICTURE" title="YOUR HOVER TEXT" style="margin-left: auto; margin-right: auto;" </a>

5  (optional)  If you don't want the item to be linked, remove the href="Your Link"
statement, so the HTML becomes similar to:

<a title="YOUR HOVER TEXT" > Your item text ... </a>

or, if the item is a picture:

< img border="0" src="URL FOR YOUR PICTURE" title="YOUR HOVER TEXT" style="margin-left: auto; margin-right: auto;" />

6  Return to Compose mode (top right of the Post Editor window), so that you aren't faced with HTML the next time you edit a post.


Formatting unlinked text that has tooltips.

If you put hover-text on words that aren't linked to anything, it's good to give them a different format so that readers know to mouse-over them to see the hover-text.    For example

When you visit Ireland, you will undoubtedly experience rain, ceol and great craic.

To do this:

1   Add this CSS rule to your blog's template  (See Adding a new CSS rule to your template if you need help with this):

.toolTippedText {
   border-bottom: 1px dotted red;
}

2   While editing your Post (etc) to add the hover-text, also add this class statement

class="toolTippedText" 

to every URL which has title="YOUR HOVER TEXT" added to it.  So the full statements become

<a href="Your Link" title="YOUR HOVER TEXT" class="toolTippedText"> Your item text ... </a>

or, if you don't want the text to actually be linked to anything:

<a title="YOUR HOVER TEXT" class="toolTippedText"> Your item text ... </a>

It probably doesn't make sense to add a font-decoration like this to tool-tipped images - though it can be done in exactly the same way.

If you don't like using red dots as the way to highlight text that has hover-text, there are other rules you can add to your template.  For example to get a solid underline in the same colour as the text font, use:

.toolTippedText {

 text-decoration:underline;

}

---

Related Articles: 



Adding a new CSS rule to your template.