Wednesday, October 23, 2013

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

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

3 comments:

  1. Hello , great explanation. If i want to link several items in a photo(eg several friends in a photo and as i hover a face , the name of the friend appears) , how do i go about, tx in adv :D

    ReplyDelete
  2. What you're asking for is called an "image map". It's not something that Blogger supports. But there are ways of doing them. Try googling "image map" and blogger, and see what results you get.

    NB I just checked the blogger-helpers-search for you: it's not something that the blogger-helpers who I follow have addressed, but I'm sure that someone out there has described it.

    ReplyDelete
  3. I am adding this to a post of mine, but would like to change the font of the popup text. I'm sure if I knew html better I would know this, but is there a way to do this for all of my popup text on a page? Thanks!

    ReplyDelete