Small Pure CSS / HTML5 Tooltips

Category: CSS & CSS3 , tooltip | June 18, 2015
Author: Daniel-Hug
Views Total: 889 views
Official Page: Go to website
Last Update: June 18, 2015
License: MIT

Preview:

Small Pure CSS / HTML5 Tooltips

Description:

A small CSS library used to append nice tooltips to any DOM elements using Html5 data attributes.

How to use it:

Load the tooltips.css in the head section of the document.

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

Create a tooltip with custom text that appears at the bottom of target element when hovered.

<button data-tip-bm="I am a tooltip">Hover me</button>

Full data attributes to control the position of your tooltips.

  • data-tip-tr: top right
  • data-tip-tm: top middle
  • data-tip-tl: top left
  • data-tip-br: bottom right
  • data-tip-bm: bottom middle
  • data-tip-bl: bottom left

You Might Be Interested In:


Leave a Reply