ad

Beautiful ToolTip With CSS3

tooltip

Tooltips are really an important part of web development. It is used to make the interface more user friendly.

In this article, you will learn how to create nice tooltip with CSS3 only. There is no need to use jQuery or any kind of images to create this.

DEMO

How to Create:

HTML Markup:

Use this markup to add tooltip in the web page.

<a href="#">highlighted<span>
<b>Highlighted</b><br>
This is a CSS3 tooltip.</span></a>

CSS:

This is the CSS markup to create and customize the look and feel of the tooltip.

body
{
color: #222;
font-family: 'Lucida sans', Arial, Helvetica;
width: 600px;
margin: 50px auto;
font-size: small;
line-height: 1.4;
}

.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}

.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
border: 0; /* IE6 fix */
}

.tooltip:hover span
{
visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}

.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}

This is a cross browser tooltip and woks on all browser. But latest browsers show this perfectly.

Tags: |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

1 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker