Pure CSS/SCSS Tooltip Library – Tooltip UI

Preview:

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>