How to Create Bubble Tooltips Using Pure CSS


This is a demo for a Top Bubble Tooltip

Tooltip Configuration

 Top   Color :
 Left   Triangle Size : px


Source Code

<!DOCTYPE html>

        a[bubbletooltip]:link, a[bubbletooltip]:visited
            	text-decoration: none;
            	position: relative;
            	color : red;

                content: "";
                position: absolute;
                border-top: 21px solid #97a5db;
                border-left: 21px solid transparent;
                border-right: 21px solid transparent;
                visibility: hidden;
                top: -20px;
                left: -12px;

                position: absolute;
                content: attr(bubbletooltip);
                color: #FFF;
                top: -35px;
                left: -26px;
                background: #97a5db;
                padding: 5px 10px;
                -moz-border-radius: 6px;
                border-radius: 6px;
                white-space: nowrap;
                visibility: hidden;

        a[bubbletooltip]:hover:before, a[bubbletooltip]:hover:after
                visibility: visible;
                -moz-transition: visibility 0s linear .3s;

<body>  <br /> <br /> <br /><br />

<p align="center">Hi, <a href="#" bubbletooltip="Hi I am a bubble tooltip">This is a demo </a>for a Top Bubble Tooltip</p>



How the above code works and How bubble tooltips can be created using pure CSS ?

Here the bubble tooltips are created only using CSS.  

It uses CSS pseudo-elements “:before”  and “: after” to crate the bubble tooltips which is a combination of two shapes.

“:before”  pseudo-element is used to insert content before the content of the link and :after" pseudo-element is used to insert some content after the content of an element.

Here “:before”  pseudo-element of CSS creates a triangle before the link and “:after”  pseudo-element of CSS create a rectangle after the link using the CSS shape creation techniques. These shapes are positioned using left, right, top and bottom properties of CSS such that these overlaps and create a bubble tooptip.

These shapes are kept hidden using the visibility Property. The shapes becomes visible as it is specified in the hoever  selector.

Here we use “content: attr(bubbletooltip);” to retrieve the value of an attribute of the selected element and use it in the style sheet . Hence we can specify the content of bubble tooltip as bubbletooltip="the content to be displayed"

Please note that bubble tooltips can be created in lot of ways (using JavaScript / jQuery and css, flash etc.


Comments(5) Sign in (optional)
showing 1-5 of 5 comments,   sorted newest to the oldest
2015-04-14 03:21:51 
How to call this code in to seperate CSS file to call in html page liket the code in a <style>
(0) (0) Reply
2014-09-25 20:05:06 
can you please make this tooltip works with TEXT ITEMS, IMG etc....thx
(0) (0) Reply
2013-11-05 14:43:47 
Hi its working only anchor tag not working for the input or text area tag, please suggest
(0) (0) Reply
2013-08-01 20:17:28 
Congratulations. This code is clean and effective. Excellent work.
(0) (0) Reply
2013-07-18 14:44:27 
 Is it possible to display an image in the tooltip?  That would be a neat enhancement.
(0) (0) Reply
Add a new comment...  (Use Discussion Board for posting new aptitude questions.)

Email: (optional)
3 + 9 = (please answer the simple math question)

Post Your Comment
View & Edit Profile Sign out
Sign in