How to Create Bubble Tooltips Using Pure CSS

Output

This is a demo for a Top Bubble Tooltip

Tooltip Configuration

Top	Color :
Right
Bottom
Left	Triangle Size :	px

Source Code

<!DOCTYPE html>
<html>

<head>
    <style>
        a[bubbletooltip]:link, a[bubbletooltip]:visited
        {
            	text-decoration: none;
            	position: relative;
            	color : red;
        }

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

        a[bubbletooltip]:after
        {
                position: absolute;
                content: attr(bubbletooltip);
                color: #FFF;
                font-weight:bold;
                top: -35px;
                left: -26px;
                background: #97a5db;
                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">Hi, <a href="#" bubbletooltip="Hi I am a bubble tooltip">This is a 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.