Add ToolTip (On Hover Text) To Your Blog/Website

Tooltip in simple terms is a text-box which is displayed over a hyperlink, when you hover your mouse cursor on the link.
These tooltips are used to briefly give the information about the target page.

See ToolTip in action here: ToolTip For Blogger

To add similar tooltips to your blog, follow these instructions:

Log in to Blogger, go to Layout -> Edit HTML, and find(CTRL+F) this:

</head>

And immediately ABOVE/BEFORE it, paste this code:

<style type='text/css'>
a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;

position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}
</style>

You may modify the code in red as per your wish and then save the template.

And now onwards, add code similar to this to any link, if you want to display tooltip over it.

<a href="#">Link-Title <span>Hidden-Tooltip</span></a>

Credits: CssGlobe
Image credits: Hogki.at

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

17 comments

Write comments

Blogger's Zone

May 30, 2009 9:35 AM delete

Amazing !! Thanks for sharing !!

angel from heaven

May 30, 2009 10:07 AM delete

thanks for explaining this so simply.

http://cutestangel.wordpress.com/2009/05/26/72-hours/

Anonymous

June 03, 2009 8:44 AM delete

thanks - looks great and well explained, see also examples on CodeRun.com

Divya Sai

June 03, 2009 8:53 AM delete

Dude don't comment anonymously, thanks for the suggestion, but you know what.. i would have deleted this comment without chking the link, just coz it's an anonymous comment, and a great website would have remained hidden for another century !

It doesn't matter whether the site belongs to your or not, if you think the site is really useful for others and it is completely safe for everybody, just share the link with a little info on the link....May be that site gets a review here with a mention to you as the referrer !!

Sudhir Kekre

June 06, 2009 11:38 AM delete

gr8 post sai. love your blog very much. lots of info.

Curtis Chambers

August 02, 2009 5:47 PM delete

Great tutorial! Best I found on this effect, which is now on my blog thanks!

One question, is it possible to combine this text hover effect with a color change on the text link? Could you advise how if so?

August 03, 2009 10:54 AM delete

Yes Curtis you can do that...
simply change the code in red like this:
from
left:.5em;
background:#fffcd1;
border:1px solid #444;
to
left:.5em;
background: url(http://DIRECT_LINK_TO_IMAGE.jpg) repeat;
border:1px solid #444;
that's it. try to use a small image.

Curtis W. Chambers

August 07, 2009 6:33 PM delete

Divya, thank you. But what I meant was is it possible to combine the effect you outline above - Add ToolTip (On Hover Text), with the effect where when you hover your cursor over a hyperlink, the link changes color before you click on it. For example, a hyper link is blue and underlined, and only when you put your cusor over the link (without clicking on the link)it turns orange. Is it possible to combine these two effects? Thank you, again, Divya!

August 08, 2009 3:07 AM delete

OOps sorry, I think I haven't read your previous comment correctly....anyways here's what you have to do, add a color variable to "a hover", like this:

a:hover{
color: #FF6600; //FF6600 is for orange.
position:relative;
z-index:100;
}

January 09, 2010 2:30 AM delete

Great!!
But how to make image preview and URL preview
like this site's demo

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

thanks

Sara Yasmine

December 04, 2010 1:04 AM delete

nice ;)

Jaime

February 06, 2011 8:38 PM delete

I'm trying to use this for a blogger blog. I put the html from above into the Design page. Then I tried to add hover text in one of my 10 added pages. Initially it works. But if I then go back into edit mode, the "span" portion disappears and it adds a blog URL for no apparent reason. Result is the whole thing is distorted. Any advice?

Sai - Blogger Help

February 07, 2011 1:08 AM delete

Yeah, do whatever editing you want BUT while publishing the post you HAVE to be in the "EDIT HTML" section and delete the extra URL from that code, just before hitting the publish button.

February 07, 2011 1:23 AM delete

There's no way around that? I anticipate having dozens or more links that I would have to edit every time I put something in there.

Why does it insert that URL?

Sai - BloggerStop.Net

February 07, 2011 1:27 AM delete

The URL is just the same url, that is there in the address bar - your blogger post-editor URL. When you leave the EDIT HTML section, the Copose mode is a WYSIWYG editor, which automatically inserts the URL from the adressbar to the incomplete a href tags, which actually here is not an incomplete code (actually, the "#" is not considered as a target url by that editor)