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.
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.
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:
Add title="YOUR HOVER TEXT" to the HTML, so it becomes something like:
If you don't want the item to be linked, remove the
part of the statement, so the HTML becomes similar to:
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.
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):
2 While editing your Post (etc) to add the hover-text, also add this class statement
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:
There is more information about some of the options for formatting a line in this article.
Adding a horizontal line between blog-posts - including CSS line formatting options
Using marker-text to find places in your HTML
What are tooltips?
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.
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:
or it may be like this if your item is a picture:<ahref="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:<ahref="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:
or, if the item is a picture:<ahref="Your Link" title="YOUR HOVER TEXT"> Your item text ...</a>
<ahref="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:
or, if the item is a picture:<atitle="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;" />
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 exampleWhen 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
or, if you don't want the text to actually be linked to anything:<ahref="Your Link" title="YOUR HOVER TEXT"class="toolTippedText"> Your item text ...</a>
<atitle="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
