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.



Ram 14 Apr 2015 12:51 PM
How to call this code in to seperate CSS file to call in html page liket the code in a <style>
Like (0)| Dislike (0)| Reply| Flag

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

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

Balraj 04 Sep 2013 2:58 AM
Like (0)| Dislike (0)| Reply| Flag

Joseph 02 Aug 2013 5:47 AM
Congratulations. This code is clean and effective. Excellent work.
Like (0)| Dislike (0)| Reply| Flag

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

Pedro 27 Mar 2013 1:08 AM
Greatest thing I have seen on the internet!
Like (0)| Dislike (0)| Reply| Flag

Add a new comment ...
To post new questions, please use Discussion Board

Name   Email

Please answer the simple math question given below

1 + 0 =


Sign in