Simple css tooltip on hover

00:07

Merbin Joe

Tool tip created using pure CSS

The following example is created by pure css, no jQuery needs to make the tool tips. And you can modify the code by using our HTML live editor and see the changed output instantly.

The CSS is


<style>

.tooltip {

 position: relative;

}

.tooltip:before, .tooltip:after {

 position: absolute;

 transition: All 0.5s ease;

 -webkit-transition: All 0.5s ease;

 -moz-transition: All 0.5s ease;

 -o-transition: All 0.5s ease;

 margin-left: -100px;

 left: 50%;

 bottom: 300%;

 display: block;

 color: #000;

 opacity: 0;

}

.tooltip:before {

 content: attr(title);

 border: solid 1px #0088cc;

 background: #FFF;

 width: 200px;

 text-align: center;

 z-index: 2;

 font-size: 13px;

 line-height: 18px;

 padding: 5px;

}

.tooltip:after {

 content: '\25c6';

 margin-left: 0;

 margin-top: 10px;

 width: 15px;

 height: 15px;

 z-index: 1;

 line-height: 28px;

 color: #0088cc;

 font-size: 20px;

}

.tooltip:hover:before, .tooltip:hover:after {

 bottom: 150%;

 opacity: 1;

}

</style>