Pure CSS/SCSS Tooltip Library – Tooltip UI

Category: CSS & CSS3 , Tooltip | January 25, 2021
Views Total:125 views
Official Page:Go to website
Last Update:January 25, 2021


Pure CSS/SCSS Tooltip Library – Tooltip UI


Tooltip UI is a CSS only tooltip library that applies a customizable, animated tooltip popup to an element you specify.

How to use it:

1. Download and load the stylesheet tooltip.css in the document.

<link rel="stylesheet" href="css/tooltip.css" />

2. Attach a tooltip to your element by defining the tooltip content in the data-text attribute:

<h2 data-text="Tooltip Content">
  Hover Me

3. Determine the position of the tooltip popup.

  • data-text-top: Top Center
  • data-text-top: Top Right
  • data-text-top: Top Left
  • data-text-bottom: Bottom Center
  • data-text-bottom: Bottom
  • data-text-bottom: Bottom Left
  • data-text-right: Right Center
  • data-text-right: Right Top
  • data-text-right: Right Bottom
  • data-text-left: Left Center
  • data-text-left: Left Top
  • data-text-left: Left Bottom
<h2 data-text="Tooltip Content"
    Hover Me

You Might Be Interested In:

Leave a Reply