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.

 


Comments(6)


scott 25 Sep 2014 10:35 PM
can you please make this tooltip works with TEXT ITEMS, IMG etc....thx
Like (0)| Dislike (0)| Reply| Flag

vishnu 05 Nov 2013 5:13 PM
Hi its working only anchor tag not working for the input or text area tag, please suggest
Like (0)| Dislike (0)| Reply| Flag

Balraj 03 Sep 2013 7:58 PM
Awesome
Like (0)| Dislike (0)| Reply| Flag

Joseph 01 Aug 2013 10:47 PM
Congratulations. This code is clean and effective. Excellent work.
Like (0)| Dislike (0)| Reply| Flag

Clem 18 Jul 2013 5:14 PM
 Is it possible to display an image in the tooltip?  That would be a neat enhancement.
Like (0)| Dislike (0)| Reply| Flag

Pedro 26 Mar 2013 6:08 PM
Greatest thing I have seen on the internet!
Like (0)| Dislike (0)| Reply| Flag

 
Add a new comment ...


Name   Email

Please answer the simple math question given below

5 + 1 =


close

Sign in