May 30, 2009

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


18 comments:

Blogger's Zone said...

Amazing !! Thanks for sharing !!

angel from heaven said...

thanks for explaining this so simply.

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

Anonymous said...

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

Divya Sai said...

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

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

Curtis Chambers said...

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?

Divya Sai said...

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

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!

Divya Sai said...

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

Anonymous said...

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 Hyun said...

nice ;)

Jaime said...

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

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.

Jaime said...

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

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)

Jaime said...

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

Noname said...

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

Generic Viagra said...

continually I visited your blog looking for some news about this, and thanks to your wonderful work all the time I find just I need to know.

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy