Cross-browser HTML5 Tooltip In Pure CSS

Category: CSS & CSS3 , tooltip | August 4, 2016
Author: freqdec
Views Total: 3,270
Official Page: Go to website
Last Update: August 4, 2016
License: MIT

Preview:

Cross-browser HTML5 Tooltip In Pure CSS

Description:

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 { ... }

 

You Might Be Interested In:


Leave a Reply