Small Pure CSS / HTML5 Tooltips

Author: Daniel-Hug
Views Total: 896 views
Official Page: Go to website
Last Update: June 18, 2015
License: MIT


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
See also  CSS Flexbox Based Responsive Navigation

Leave a Reply

Your email address will not be published. Required fields are marked *