Simple Pure CSS ToolTip | purecsstooltip.css

purecsstooltip.css is used as a tooltip added for a web application, a web page without javascript.

This is so full of CSS instructions that you just added a CSS file in your head that is to import CSS into your style and you can use it.

Read More – Easy to Use Pure CSS/SCSS Tooltip Library | Tooltip UI

How to make use of 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 within the doc.

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

3. Attach a tooltip to the component by defining the tooltip text within the tooltip-lbl attribute:

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

4. Set the position of the tooltip:

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

5. Set the tooltip size utilizing the next CSS classes:

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

Read More – 

How to Create Guided Tours and Highlight Elements | Tooltip Sequence
Bootstrap Tooltips and Popovers Extend By Adding Custom Classes

Simple CSS Only Tooltips Plugin/Github


See Demo And Download

Official Website(iamsgokul): Click Here

This superior jQuery/javascript plugin is developed by iamsgokul. For extra Advanced Usage, please go to the official website.

Share