CSS ToolTip
Tooltip is a small information box that appears when the user moves the mouse pointer over
an element. This plugin made out of pure CSS3 their is no any requirement of JavaScript
Hover over me
Include tooltip on your project.
You can download tooltip.css form here
Or you can copy css form below
*[data-tooltip] {
position: relative;
}
*[data-tooltip]:hover:after, *[data-tooltip]:hover:before {
opacity: 1;
visibility: visible;
}
*[data-tooltip]:after, *[data-tooltip]:before {
position: absolute;
top: auto;
bottom: 100%;
left: 50%;
opacity: 0;
visibility: hidden;
-webkit-transition: 0.15s ease-in;
transition: 0.15s ease-in;
z-index: 5;
}
*[data-tooltip]:after {
content: attr(data-tooltip);
background: rgba(0, 0, 0, 0.8);
padding: 2px 7px;
text-align: center;
color: #fff;
font-size: 12px;
line-height: 16px;
white-space: nowrap;
border-radius: 4px;
-webkit-transform: translate(-50%, -8px);
transform: translate(-50%, -8px);
}
*[data-tooltip]:before {
content: '';
top: auto;
bottom: 100%;
border: 4px solid transparent;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-top-color: rgba(0, 0, 0, 0.8);
}
*[data-tooltip][data-position="bottom"]:after {
top: 100%;
bottom: auto;
-webkit-transform: translate(-50%, 8px);
transform: translate(-50%, 8px);
}
*[data-tooltip][data-position="bottom"]:before {
top: 100%;
bottom: auto;
border-color: transparent;
border-bottom-color: rgba(0, 0, 0, 0.8);
}
*[data-tooltip][data-position="left"]:after {
left: 0;
bottom: auto;
top: 50%;
margin-left: -8px;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
*[data-tooltip][data-position="left"]:before {
left: 0;
bottom: auto;
top: 50%;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
border-color: transparent;
border-left-color: rgba(0, 0, 0, 0.8);
}
*[data-tooltip][data-position="right"]:after {
left: 100%;
bottom: auto;
top: 50%;
-webkit-transform: translate(8px, -50%);
transform: translate(8px, -50%);
}
*[data-tooltip][data-position="right"]:before {
left: 100%;
top: 50%;
bottom: auto;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
border-color: transparent;
border-right-color: rgba(0, 0, 0, 0.8);
}
Using the CSS3 Tooltip
To create a tooltip, add the data-tooltip=" " attribute to an element and specify the text that should be displayed inside the tooltip:
<a href= "#" data-tooltip= "I am here..!" > Hover over me</a>
Result :
Hover over me
Positioning Tooltips
By default, the tooltip will appear on top of the element.
Use the data-position attribute to set the position of the tooltip on top, bottom, left or the right side of the element:
Tooltip on left
Tooltip on top
Tooltip on bottom
Tooltip on right
<button type= "button" data-placement= "left" data-tooltip= "Tooltip on left" > Tooltip on left</button>
<button type= "button" data-placement= "top" data-tooltip= "Tooltip on top" > Tooltip on top</button>
<button type= "button" data-placement= "bottom" data-tooltip= "Tooltip on bottom" > Tooltip on bottom</button>
<button type= "button" data-placement= "right" data-tooltip= "Tooltip on right" > Tooltip on right</button>