What are tooltips?
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.
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:
or it may be like this if your item is a picture:<
a
href
=
"Your Link"
> Your item text ...
</a>
<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:
or, if the item is a picture:<
a
href
=
"Your Link" title="YOUR HOVER TEXT"
> Your item text ...
</a>
<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:
or, if the item is a picture:<
a
title="YOUR HOVER TEXT"
> Your item text ...
</a>
<
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 {2 While editing your Post (etc) to add the hover-text, also add this class statement
border-bottom: 1px dotted red;
}
class="toolTippedText"to every URL which has title="YOUR HOVER TEXT" added to it. So the full statements become
or, if you don't want the text to actually be linked to anything:<
a
href
=
"Your Link" 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.<
a
title="YOUR HOVER TEXT"
class="toolTippedText"> Your item text ...
</a>
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.