twotip v1.0.2

twotip

twotip is a minimal CSS tooltip library.

Installation

With npm

npm install twotip

With yarn

yarn add twotip

With pnpm

pnpm add twotip

With CDN

<link rel="stylesheet" href="https://unpkg.com/twotip/twotip.min.css">

Setup

With PostCSS

@import "twotip";

With Vite/Webpack

import "tooltip";

Usage

Simply add a data-tt="tooltip message" attribute to the element on which the tooltip should appear. For example:

<button data-tt="This is a tooltip">Click me!</button>

Positioning Tooltip

You can change the position of the tooltip by adding a data-tt-pos attribite with one of the following values: top, bottom, left or right. For example:

<button data-tt="This is a tooltip" data-tt-pos="right">Click me!</button>

Tooltip Sizes

You can change tooltip size by adding a data-tt-size attribite with one of the following values: small, medium, large or max (default, tooltip stretches to fit the text). For example:

<button data-tt="This is a tooltip" data-tt-size="small">Click me!</button>

Static Tooltip

If you want your tooltip to be always visible add a data-tt-open attribute:

<button data-tt="Always open" data-tt-open>Click me!</button>

Customizing Tooltip

You can use CSS variables to customize your tooltip: