Pure CSS/SCSS Tooltip Library – Tooltip UI

Category: CSS & CSS3 , Tooltip | January 25, 2021
Author: elnatanitzan
Views Total: 87 views
Official Page: Go to website
Last Update: January 25, 2021
License: MIT

Preview:

Pure CSS/SCSS Tooltip Library – Tooltip UI

Description:

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

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"
    data-text-top>
    Hover Me
</h2>

You Might Be Interested In:


Leave a Reply