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:
<!--TOOLTIP-STARTS-->
<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>
<!--TOOLTIP-STOPS-http://bloggerstop.net-->
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

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

17 comments

Write comments
May 30, 2009 9:35 AM delete

Amazing !! Thanks for sharing !!

Reply
avatar
May 30, 2009 10:07 AM delete

thanks for explaining this so simply.

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

Reply
avatar
Anonymous
June 03, 2009 8:44 AM delete

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

Reply
avatar
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 !!

Reply
avatar
June 06, 2009 11:38 AM delete

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

Reply
avatar
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?

Reply
avatar
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.

Reply
avatar
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!

Reply
avatar
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;
}

Reply
avatar
Anonymous
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

Reply
avatar
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?

Reply
avatar
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.

Reply
avatar
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?

Reply
avatar
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)

Reply
avatar
February 07, 2011 1:48 AM delete

Is there any other way to do a hover? One that won't require deleting every inserted URL every time I edit the page.

Reply
avatar
August 31, 2011 10:19 AM delete

hi... How can i add width & height to the tooltip?

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon