Adding tooltips or hover text to Blogger posts and gadgets

Rocky
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:
.toolTippedText {
 text-decoration:underline;
}

There is more information about some of the options for formatting a line in this article.



Related Articles:

Adding a new CSS rule to your template.

Adding a horizontal line between blog-posts - including CSS line formatting options

Using marker-text to find places in your HTML

0 Comments