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:


        <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>