Tooltip On Text Hover

It's a very easy code for mouse over the text tooltips using HTML data attribute in CSS.

by Aqeel Malik

HTML

<!--
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | PHP+MySQL | Photoshop | Firework | Dreamweaver
-->
<div style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<br/>
<span class="tooltip" data-tooltip="webicosoft.com">Hover on me</span>

</div>

CSS

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/
* {margin:0; padding:0}
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip::after {
    content: attr(data-tooltip);
    color: #fff; width:125px;
    background-color: #555;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    bottom: 120%;left: 50%;
    transform: translate(-50%, 0);
}
.tooltip::before {
    content: "";
    position: relative;
    top: 100%; left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
.tooltip::after,
.tooltip::before {
    visibility: visible;
    z-index: 1; opacity: 0;
    transition: opacity 1s;
}
.tooltip:hover::after,
.tooltip:hover::before {
    visibility: visible;
    z-index: 1; opacity: 1;
}

JavaScript

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/