Adding tooltips (hover text) to Blogger posts

/ Thursday, September 16, 2010 /
This article is about putting a "tooltip" (text that is shown when you hover over) into an URL in a Blogger post.

What are tooltips?


Tooltips are a feature found in many websites and GUI-based tools:  when a viewer hovers their mouse over an item, a small piece of text is shown which explains the item.
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.)
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:
<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>

4  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>

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

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 {
   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;
}


Related Articles: 



Adding a new CSS rule to your template.

0 comments:

Post a Comment

Labels

Thank you for visiting my site. I’m the author of home decor help, home garden decor, home design interiors, tina 4 home design, uhozz, visit yogurt lab, sitazine, is beauty tips and sunnijati website. Modestop Topmodest Free Beauty Tips Shitazine Sitahouseblog Izhealthy Shitadesign Sitahouse Topmodest Sitazine Irezine Home- decor-design Shitadesign Shitadesign-dot-com Inhomeland inhouseland ghiuldenika inebautystyle enterarteiuna radiodominiopublico biberealexandru fabiobernadosdi geeklore31 syahadah-alhafeezah peaceloveiman bigwideempty techandchefadventures kaosgunlugu fikirkulubleri duazinciri theinternationalrules morefortngintn monkeymanzach lifeatthegreenys photokid84 chelsea-settles chasingmommyhood sexyhotactresseswallpaper tophotnewstodays avvani urbantrendsussex voychic reisyamode sitazine reportmy homedesignideasx mystylepinterest fashionstyleco popularnewstips isexy-hot-girls sexywomengirl trendymodeku derumahdesign womenhairs hackoblogger gadiswomen homeinteriordesignideas1s homedesignideasa uniquehomedesignsw enterpreneurforbloggers earningblogtipss lilyandgiasmom onfeatureblog aboutadsen onblogsocial tecnologiku onlinekutip akuhub caramakemoney youseoneed blogukus newbieblogit adsenseguideto triond-adsense inseoservice intipseoblog otherseoblog freeseoguid seoblognets tawaguideblog seosecretip buzdesign modewomen gayawoman cantikide tipsehat bebeautyps tipsjilbabcantiks idekontenislami healthfitnessnutritionsz jilbab-tips tips-home-decor caramemakaijilbabv beritaremajaterkinie allisoncrewnews mypinspinterest mypinspinterest gogirlsgallery seyhotgirls topmodest worldotgirls seksigirlsblog yourgirlsnet sexywomensia decorativehousedesigns simplebloggertipsz aboutadsense09s marketingner freeseotipstricksz womensiana chicstylegallery oblogkudewe colhomegallery marketserve onlibusiness artodesign designinguide oninteriorhome interiormu intutorblog blogoffeed newbloggerhint enginseo dibisnistips internetmublog onroomdesign homegardenco
 
Copyright © 2010 New Blogger Tips, All rights reserved
Design by DZignine. Powered by Blogger