Create Simple Tooltips For DOM Elements Using Pure CSS/CSS3

Category: CSS & CSS3 , tooltip | March 30, 2015
Author: robmclarty
Views Total: 2,146
Official Page: Go to website
Last Update: March 30, 2015
License: MIT

Preview:

Create Simple Tooltips For DOM Elements Using Pure CSS/CSS3

Description:

A pure CSS/CSS3 powered tooltip component which allows you to append popup bubbles to any DOM elements when mouse hover.

Supports multi-line tooltip text and four directions. Written in LESS.

How to use it:

Include the tooltip.css in the document.

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

Add the CSS class ‘tooltip’ to DOM element where you wish to display a tooltip when mouse hover. You can use data-tooltip attribute to specify the text displayed in the tooltip.

<a href="" class="tooltip top" data-tooltip="Tooltip content">Hover me</a>

To change the direction of the tooltip, just add the appropriate CSS class as follow.

<a href="" class="tooltip top" data-tooltip="Tooltip content">Top</a>
<a href="" class="tooltip bottom" data-tooltip="Tooltip content">Bottom</a>
<a href="" class="tooltip left" data-tooltip="Tooltip content">Left</a>
<a href="" class="tooltip right" data-tooltip="Tooltip content">Right</a>

You Might Be Interested In:


Leave a Reply