Create Smart and Stylish Tooltip

Anoop Kr Sharma

5.00/5 (3 votes)

Jul 2, 2013

CPOL

1 min read

16180

224

Easy, simple, stylish tooltip created using HTML and CSS.

Download tooltipbyanoop.zip - 809 B

After getting a great response on Create Smart and Stylish Butto , now I have decided to post another Trick on Creating a Smart and Stylish Tooltip.

Let's Start

Step 1: Creating a HTML Document

<body> 
<a href="#" class="tooltip">Tooltip example<span>
  <img src="arrow.gif" class="arrow"><strong>Tooltip
  </strong><br>Created by Anoop</span></a>  
</body>

Our HTML document will look like this after creating HTML document.

Preview:

Step 2: Creating Stylesheet /Style for the HTML Document

CSS

a.tooltip strong
{
line-height:30px;
}

We have set line height for Strong tag.

CSS

a.tooltip:hover
{
text-decoration:none;
}

We have set that on mouse hover the link , we don't need any Text-decoration (means on hover link - underlining of link removed).

CSS

a.tooltip span
{
z-index:10;
display:none;
padding:14px 20px;
margin-top:50px;
margin-left:-160px;
width:240px;
line-height:16px;
}

The thing we are trying to do to hide the content inside the span and when we take mouse pointer on link than we display our content.

Here we use

Z-index:The z-index property specifies the stack order of an element.

Preview:

CSS

a.tooltip:hover span
{
display:inline;
position:absolute;
border:2px solid #fff;
color:#eee;
background-color:black;
}

Here we have set the color, background-color, border and position of span on mouse hovering the link, i.e., a.tooltip:hover.

Preview:

CSS

.arrow
{
z-index:20;
position:absolute;
border:0;
top:-14px;
left:100px;
}

Here we move image arrow to upwards and slightly towards Left.

Preview:

CSS

/* CSS3 for more Stylish Look*/ 
a.tooltip span
{
border-radius:2px;
-webkit-border-radius:2px;/*for chrome and safari*/
-ms-border-radius:2px;/*for IE*/
-moz-border-radius:2px;/*Mozilla*/
-o-border-radius:2px;/*Opera*/
box-shadow:0px 0px 8px 4px #666;
opacity:0.8;
}

Final thing to make Tooltip more stylish by using CSS3.

Making border corners round by using border-radius, giving shadow to box and opacity.

Now here is the final look of Tooltip that we have created.

Previewew

Hope you like it. Thank you.