Adding tooltips or hover text to Blogger posts and gadgets

This article is about putting a "tooltip" (text that is shown when you hover over) into something (eg text, a web-address or even a picture) in a Blogger post or gadget.

What are tooltips?

Tooltips are a feature found in many websites and modern computer based software: when a viewer hovers their mouse over an item, a small piece of text is shown, generally formatted in a box which is highlighted in some way.

They can be used for all sorts of things, to provide definitions of technical or foreign-language words, additional information about particularly interesting concepts - or as an incentive or invitation to take an action eg you could tool-tip "click here to enter" with a description of the prize or benefits of entering.)

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.

Create the item that you want the tool-tip to be on (it may be text or a picture).

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.)

Go into HTML mode (top right side of the editor toolbar), and find the HTML for the item.
Hints:

Use the find feature in your brower - it may be helpful to temporarily put some marker text just before and after the item.

If you want to put a tooltip into a text gadget - just put the text into an HTML gadget instead, and that way you will be able to work in HTML mode.

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>

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>

If you don't want the item to be linked, remove the href="Your Link"
part of the 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;" />

If you're working in the post-editor, 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: