@8bitbish/tooltips

Tooltips for React, Figma plugins, Framer, and vanilla JS.

Try the live demo →

• Auto-positions above, below, left, or right of the trigger
• Stays within the viewport
• After the first tooltip in a session, subsequent ones appear instantly

Install

npm install @8bitbish/tooltips

---

React

Import the component and stylesheet — the stylesheet only needs to be imported once at your app root:

import { Tooltip } from '@8bitbish/tooltips'
import '@8bitbish/tooltips/dist/tooltip.css'

Wrap any single element:

<Tooltip text="Save file" shortcut="⌘S">
  <button>Save</button>
</Tooltip>

children must be a single element that accepts a ref. Function components need forwardRef.

Props

Prop	Type	Default	Description
text	string	—	Tooltip label (required)
shortcut	string	—	Keyboard shortcut shown on the right
delay	number	900	Delay in ms before the tooltip appears
placement	'above' | 'below' | 'left' | 'right'	auto	Force a direction; auto-detects (above → below → left → right) if omitted
children	React.ReactElement	—	The element that triggers the tooltip

---

Vanilla JS

For Chrome extensions, plain HTML, or any non-React environment:

import '@8bitbish/tooltips/vanilla'
import '@8bitbish/tooltips/dist/tooltip.css'

Add data-tooltip to any element — no wrapping needed:

<button data-tooltip="Save file" data-shortcut="⌘S">Save</button>
<button data-tooltip="Delete">🗑</button>

Dynamically added elements are picked up automatically via MutationObserver.

Attributes

Attribute	Description
data-tooltip	Tooltip label (required)
data-shortcut	Keyboard shortcut shown on the right
data-delay	Delay in ms before appearing (default 900)
data-placement	Force direction: above, below, left, or right (auto if omitted)

---

Customisation

Set these CSS variables once in your global stylesheet — applies to both React and vanilla:

:root {
  --tooltip-bg:          #1c1c1c; /* background colour      */
  --tooltip-radius:      6px;     /* corner radius          */
  --tooltip-font:        inherit; /* font family            */
  --tooltip-font-size:   11px;    /* font size              */
  --tooltip-font-weight: 350;     /* font weight            */
}