Simple CSS Only Tooltips – purecsstooltip.css

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


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 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

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

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

You Might Be Interested In:

Leave a Reply