How to Create Bubble Tooltips Using Pure CSS

Output

This is a demo for a Top Bubble Tooltip

Tooltip Configuration

Top
Right
Bottom
Left
background:
Source Code
<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        body
        {
            	font-family:Georgia,"Times New Roman",Times,serif;
            	font-size:medium;
                line-height: 150%;
        }
   
        a[bubbletooltip]:link, a[bubbletooltip]:visited
        {
            	text-decoration: none;
            	position: relative;
            	color: red;
        }

        a[bubbletooltip]:before
        {
                content: "";
                position: absolute;
                border-top: 26px solid #292f45;
                border-left: 26px solid transparent;
                border-right: 26px solid transparent;
                visibility: hidden;
                top: -20px;
                left: -12px;
        }

        a[bubbletooltip]:after
        {
                position: absolute;
                content: attr(bubbletooltip);                
                font-weight: bold;
                top: -35px;
                left: -26px;
                background: #292f45;
                color: #FFFFFF;
                padding: 5px 10px;
                -moz-border-radius: 6px;
                -webkit-border-radius:6px;
                -khtml-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;
        }


    </style>
</head>
<body>  <br /> <br /> <br /><br />

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


</body>
</html>
 
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
Ram
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
scott
2014-09-25 20:05:06 
can you please make this tooltip works with TEXT ITEMS, IMG etc....thx
(0) (0) Reply
vishnu
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
Joseph
2013-08-01 20:17:28 
Congratulations. This code is clean and effective. Excellent work.
(0) (0) Reply
Clem
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.)

Name:
Email: (optional)
4 + 2 = (please answer the simple math question)

Post Your Comment
X  
View & Edit Profile Sign out
X
Sign in
Google
Facebook
Twitter
Yahoo
LinkedIn
X