CSS is Awesome, but “CSS3” is Awesomely Awesome.
With CSS3 we can make our pages even more beautiful without using additional images and extra markup.
In this post I have tried to make tooltips using CSS3. This is just a sample implementation for tooltip, you can have even better variants.
Here, this example is semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images.
The inspiration for these tooltips is from the excellent attempt from “Nicolas Gallagher” in Pure CSS speech bubbles.
Lets first head on to the demo for its actual effect.
Tooltip using CSS3
Interested ??? Lets head on to its code
HTML Markup
The HTML used here is very simple, just add class”tooltip” and in title put tooltip text.
<a class="tooltip" title="This is first tooltip" href="#">Link</a>
CSS Code
The CSS for this effect utilizes :before and :after to show tooltip. Moreover box-shadow, gradient, border-radius properties of CSS3 are used to add some glare. Here is the code.
a.tooltip:after{ font:12px/1.4 Arial,Georgia,sans-serif; content: attr(title); display:none; position:absolute; padding:5px 10px; top:0px; margin:1em 0 3em; color:#fff; background:#075698; left:-20px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:-webkit-gradient(linear, left top, left bottom, from(#075698), to(#2e88c4)); background:-moz-linear-gradient(top, #075698, #2e88c4); background:-o-linear-gradient(top, #075698, #2e88c4); background:linear-gradient(top, #075698, #2e88c4); -moz-box-shadow: 0px 0px 4px #000; /* FF3.5+ */ -webkit-box-shadow: 0px 0px 4px #000; /* Saf3.0+, Chrome */ box-shadow: 0px 0px 4px #000; /* Opera 10.5, IE 9.0 */ filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000')"; /* IE8 */ } /* creates triangle */ a.tooltip:before{ z-index:13; position:absolute; content:"\00a0"; display:none; width:0; height:0; border-style:solid; top:-3px; left:0px; border-width:15px 7px 15px 7px; border-color:transparent transparent #075698; } a.tooltip:hover::before{ display:block; } a.tooltip:hover{ z-index:10; position:relative; } a.tooltip:hover::after{ width:200px; display:block; margin:25px 0 0 10px; }
Hope you'll like it.
Nive article nitin
very nice indeed. but how to prevent the “normal” tooltip from appearing ?
You can keep the text in some other attribute.
Like:
<a class=”tooltip” tip=”This is first tooltip” href=”#”>Link</a>
and make similar changes in CSS:
content: attr(tip);
data-tooltip (or data-anything) in order to be html 5 compliant
how actually to add this content: attr(tip)
Thanks
thanks nitin very nice work…
Nice, but if the link is after an automatic line break, the tooltip is displayed where the link would be if there wasn’t a break.
Any way to fix this, besides adding a ?
I don’t see a direct CSS way to position it correctly in case of line breaks. What you can do instead is to prevent link break in links:
white-space:nowrap;
This is not support on Image Hover
We can say whatever we want, but in a way IE6 was and is a very modern, albeit annoying, browser. A lot of things that Firefox, Safari and Opera didn’t get many years later IE6 already supported through filter/ms-filter.
[...] Источник [...]
[...] Tooltip using CSS3 (no image), [...]
[...] Tooltip using CSS3 (no image), [...]
[...] Tooltip using CSS3 (no image), [...]
[...] Tooltip using CSS3 (no image), [...]
[...] Tooltip using CSS3 (no image), [...]
[...] Tooltip using CSS3 (no image), [...]
[...] Tooltip using CSS3 (no image), [...]
[...] Tooltip using CSS3 (no image), [...]
Thank you. Your example really helped me.
[...] Sexy Tooltip using CSS3 | Demo [...]
Is it possible to add a delay like 500ms ?
And if I remove the original title attribute and add the data-title attribute, will it influence the SEO?