Tooltip

Displays a short label on hover or focus, anchored to a trigger element.

import { ... } from '@corndev/ui-overlays'

HTML

<span class="corn-tooltip" data-placement="top" role="tooltip">Copied</span>

Classes

Class
`.corn-tooltip`

Attributes

Attribute	Values
`data-visible`	`present or absent`
`data-placement`	`top\|bottom\|left\|right`

Vanilla JS

Required for behaviour — adds shows on hover and focus, and flips the placement near a viewport edge.

import { createTooltip } from '@corndev/ui-overlays';
import '@corndev/ui/theme';

const triggerEl = document.querySelector('#target');
const instance = createTooltip(triggerEl, { /* options */ });

Options

Option	Type	Default	Description
`content`	`string`	`required`	Tooltip text (required)
`placement`	`'top'\|'bottom'\|'left'\|'right'`	`'top'`	Preferred placement
`delay`	`number`	`0`	Show delay in ms

React

Tooltip — from @corndev/ui-overlays-react.

The props are the same as the options above, plus className.

React usage

import { Tooltip } from '@corndev/ui-overlays-react';
import '@corndev/ui-overlays/styles';

<Tooltip content="This action is irreversible">
  <button>Delete</button>
</Tooltip>

Placement

Defaults to top. Auto-flips to the opposite side if there isn’t enough space in the viewport.

<Tooltip content="Above"  placement="top"><button>Top</button></Tooltip>
<Tooltip content="Below"  placement="bottom"><button>Bottom</button></Tooltip>
<Tooltip content="Left"   placement="left"><button>Left</button></Tooltip>
<Tooltip content="Right"  placement="right"><button>Right</button></Tooltip>

Show delay

Useful for preventing tooltips from flashing on fast mouse passes.

<Tooltip content="Saved!" delay={300}>
  <button>Save</button>
</Tooltip>