HTML
<div class="container">
<h1>HTML5 Tooltips with Data Attribute</h1>
<section>
<a href="#" class="tooltip animationTips" tool-tips="It's Sample tooltip">Black Top Tooltip</a>
<a href="#" class="tooltip animationTips right" tool-tips="How's that one?">Black Right</a>
<a href="#" class="tooltip animationTips blue" tool-tips="oh this one is blue">Top Blue</a>
</section>
<section>
<a href="#" class="tooltip bottom animationTips blue" tool-tips="Logn Bottom Tooltip">Bottom Blue</a>
<a href="#" class="tooltip left animationTips blue" tool-tips="tooltips are clickable">on the left</a>
<a href="#" class="tooltip right animationTips blue" tool-tips="Right Blue one">find out right one</a>
</section>
<section>
<p>An easy way to build tooltip using HTML5 Data Attribute. These <a href="http://codeconvey.com/building-html5-tooltips-with-html5-data-attribute/">HTML5 tooltips</a> are simple and easy to implement. All you need to copy and paste the code. You can implement in four different ways top, bottom, left and right. It also has two different color variations. It includes nice animations that slide out when to hover the link.</p>
</section>
</div>
CSS
@import 'https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,600,700,800,900';
body {
background: #e74c3c none repeat scroll 0 0;
color: #fff;
font-family: "Raleway",sans-serif;
font-size: 15px;
font-weight: 400;
margin: 0 auto;
padding: 0;
text-align: center;
}
a.tooltip {
color: #fff;
display: inline;
font-weight: bold;
margin: 20px 25px;
position: relative;
text-decoration: none;
text-transform: capitalize;
}
a.tooltip:after{
color: #fff;
font-size:14px;
display: block;
visibility: hidden;
position: absolute;
bottom: 0;
left: 20%;
opacity: 0;
content: attr(tool-tips); /* might also use attr(title) */
height: auto;
min-width: 188px;
padding: 5px 8px;
z-index: 999;
color: #fff;
text-decoration: none;
text-align: center;
background: rgba(0,0,0,0.85);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
a.tooltip:before {
position: absolute;
visibility: hidden;
width: 0;
height: 0;
left: 50%;
bottom: 0px;
opacity: 0;
content: "";
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: rgba(0,0,0,0.85) transparent transparent transparent;
}
a.tooltip:hover:after{ visibility: visible; opacity: 1; bottom: 20px; }
a.tooltip:hover:before{ visibility: visible; opacity: 1; bottom: 14px; }
/* tips on bottom */
a.tooltip.bottom:after { bottom: auto; top: 0; }
a.tooltip.bottom:hover:after { top: 28px; }
a.tooltip.bottom:before {
border-width: 0 5px 8.7px 5px;
border-color: transparent transparent rgba(0,0,0,0.85) transparent;
top: 0px
}
a.tooltip.bottom:hover:before { top: 20px; }
/* tips on the right */
a.tooltip.right:after { left: 100%; bottom: -45%; }
a.tooltip.right:hover:after { left: 110%; bottom: -45%; }
a.tooltip.right:before {
border-width: 5px 10px 5px 0;
border-color: transparent rgba(0,0,0,0.85) transparent transparent;
left: 90%;
bottom: 2%;
}
a.tooltip.right:hover:before { left: 100%; bottom: 2%; }
/* tips on the left */
a.tooltip.left:after { left: auto; right: 100%; bottom: -45%; }
a.tooltip.left:hover:after { right: 110%; bottom: -45%; }
a.tooltip.left:before {
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent rgba(0,0,0,0.85);
left: auto;
right: 90%;
bottom: 2%;
}
a.tooltip.left:hover:before { right: 100%; bottom: 2%; }
/* tooltip colors (add your own!) */
a.tooltip.blue:after { background:#5f87c2; }
a.tooltip.blue:before { border-color: #5f87c2 transparent transparent transparent; }
a.tooltip.bottom.blue:before{ border-color: transparent transparent #5f87c2 transparent; }
a.tooltip.right.blue:before { border-color: transparent #5f87c2 transparent transparent; }
a.tooltip.left.blue:before { border-color: transparent transparent transparent #5f87c2; }
a.tooltip.animationTips:after, a.tooltip.animationTips:before {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* demo */
section{ padding:2em;}
section p{
line-height:25px;
font-size:16px;
color: #fff;
}
section a {
display: inline;
text-decoration: none;
text-transform: capitalize;
color: #000;
font-weight:bold;
}
