Simple CSS Only Tooltips – purecsstooltip.css

Category: CSS & CSS3 , Tooltip | May 13, 2021
Author:iamsgokul
Views Total:216 views
Official Page:Go to website
Last Update:May 13, 2021
License:MIT

Preview:

Simple CSS Only Tooltips – purecsstooltip.css

Description:

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>

You Might Be Interested In:


Leave a Reply