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
a.tooltip span
{
border-radius:2px;
-webkit-border-radius:2px;
-ms-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
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.
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
