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:

CSS Variable	Description	Default
--tt-bg	Background color of the tooltip	#333
--tt-fg	Text color of the tooltip	#fff
--tt-padding	Padding of the tooltip	0.3em
--tt-radius	Border radius of the tooltip	0.2em
--tt-delay	Delay before tooltip appears	0.1s
--tt-duration	Duration of the appear animation	0.15s