Small Pure CSS / HTML5 Tooltips

Category: CSS & CSS3 , Tooltip | June 18, 2015
Views Total:898 views
Official Page:Go to website
Last Update:June 18, 2015


Small Pure CSS / HTML5 Tooltips


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