Fooltips

fooltips

Tooltips with just CSS

Installation

npm

npm install --save fooltips

unpkg

https://unpkg.com/fooltips

Customization

Defaults:

      --multiline-max-width: 250px;
      --tooltip-background-color: rgba(0, 0, 0, 0.8);
      --tooltip-color: #fff;
      --tooltip-padding: 5px 8px;
      --tooltip-border-radius: 4px;
      --tooltip-font-size: 0.7rem;
      --tooltip-zIndex: 9000;
      --tooltip-content: aria-label;
    

      .tooltip--red {
      --tooltip-background-color: red;
      }
I have a custom tooltip 

      .tooltip--big {
      --tooltip-background-color: #222;
      --tooltip-padding: 8px 12px;
      --tooltip-font-size: 1rem;
      }
I have a big tooltip 

      .tooltip--href {
      --tooltip-content: href;
      }
I have a tooltip with a link

API

Base

data-tooltip

Direction

data-tooltip="top" data-tooltip="top-right" data-tooltip="top-left" data-tooltip="left" data-tooltip="right" data-tooltip="bottom-right" data-tooltip="bottom-left" data-tooltip="bottom"

Multiline

data-tooltip-multiline

States

data-is-tooltiped

Examples

Top

<span data-tooltip="top" aria-label="Simple text"></span> <span data-tooltip="top-right" aria-label="Simple text"></span> <span data-tooltip="top-left" aria-label="Simple text"></span>

Bottom

<span data-tooltip="bottom" aria-label="Simple text"></span> <span data-tooltip="bottom-right" aria-label="Simple text"></span> <span data-tooltip="bottom-left" aria-label="Simple text"></span>

Left

<span data-tooltip="left" aria-label="Simple text"></span>

Right

<span data-tooltip="right" aria-label="Simple text"></span>

Multiline

<span data-tooltip="right" aria-label="Simple text"></span>