Hi all,

Below is an example to make a tooltip using pure CSS. In this method, we are using custom HTML attribute which we are defined here as tooltip and we are using pseudo element.

The best thing with this method or technique it works in IE9 and partially in IE8.

CSS -

[tooltip]:before {
    content: attr(tooltip);
    position: absolute;
    opacity: 0;
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;    
    box-shadow: 2px 2px 5px #ccc;    
    color: #ccc;
}

[tooltip]:hover:before {
    opacity: 1;
    background: #191919;
    margin-top: -20px;
    margin-left: 20px;   
}

[tooltip]:not([tooltip-persistent]):before {
    pointer-events: none;
}
div {
    
    background: #ccc;
    margin: 20px;
    padding: 5px;
}

HTML -

<div tooltip="Hi, I'm a tooltip. Pretty easy uh ? ;)">Div with standard tooltip. Hover me to see the tooltip. Hovering the tooltip doesn't matter if you hover out of my boundaries, the tooltip will disappear.</div>

<div tooltip="Hi, I'm a persistent tooltip." >Div with persistent tooltip. Hover me to see the tooltip. The tooltip won't expire until you hover on me OR it.</div>

Click for rendered output