Click here to Skip to main content
Click here to Skip to main content
Go to top

Create Smart and Stylish Tooltip

, 2 Jul 2013
Rate this:
Please Sign up or sign in to vote.
Easy, simple, stylish tooltip created using HTML and CSS.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Anoop Kr Sharma
Student
India India
No Biography provided
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalSanjay K. Gupta2-Jul-13 4:01 
GeneralRe: My vote of 5 PinprofessionalAnoop Kr Sharma3-Jul-13 0:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 2 Jul 2013
Article Copyright 2013 by Anoop Kr Sharma
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid