Simple CSS Only Tooltips – purecsstooltip.css

Just another CSS only tooltip library for showing custom tooltips when hovering over an element.

How to use it:

1. Install and import the purecsstooltip into JS.

# NPM
$ npm i purecsstooltip

import 'purecsstooltip';

2. Or import the minified version of the tooltip library in the document.

<link rel="stylesheet" href="purecsstooltip.min.css" />

3. Attach a tooltip to the element by defining the tooltip text in the tooltip-lbl attribute:

<button tooltip-lbl="Tooltip Content">
  Hover Me
</button>

4. Set the position of the tooltip:

• top
• right
• bottom
• left
• top-left
• top-right
• bottom-left
• bottom-right

<button tooltip-lbl="Tooltip Content" tooltip-pos="top">
  Hover Me
</button>

5. Set the tooltip size using the following CSS classes:

• sm
• md
• lg
• xlg
• fit

<button tooltip-lbl="Tooltip Content" tooltip-pos="top" tooltip-size="sm">
  Hover Me
</button>