Cross-browser HTML5 Tooltip In Pure CSS

Just another pure CSS implementation of cross-browser DOM tooltips using HTML5 data attribute and several CSS3 properties.

How to use it:

Add the tooltip.css into your html page and done.

<link href="tooltip.css" rel="stylesheet">

Create a basic tooltip with custom content using ‘data-tooltip’ attribute as follow:

<span data-tooltip="I’m a tooltip">Hover Me</span>

Append the tooltip to a block element:

<span class="tooltip-wrapper" 
      data-tooltip="I am a tooltip">
      <img src="1.jpg">
</span>

.tooltip-wrapper {
  display: inline-block;
  border: 0 none !important;
}

Apply predefined themes to the tooltips:

data-tooltip-theme="blue"
data-tooltip-theme="green"
data-tooltip-theme="orange"
data-tooltip-theme="red"

Apply your own CSS styles to the tooltips.

data-tooltip-theme="custom"

.custom { ... }