Tooltip

Hover and focus tooltip with four placements, delay, and arrow.

Overlaysoverlayhintinteractive

Workbench

Rendering Tooltip…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add tooltip

Usage

TSX

import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";

export default function Example() {
  return (
    <Tooltip content="Copy a link to this page">
      <Button variant="secondary" size="sm">Share</Button>
    </Tooltip>
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

HTML

Without React, write this markup and load @mlola-ui/behavior once. It runs the keyboard, focus and state for every element marked data-ml="tooltip", including markup added later, and needs no build step.

HTML

<span class="ml-tooltip-root" data-ml="tooltip">
  <button class="ml-button" type="button" data-variant="secondary" data-size="sm"><span class="ml-button-label">Share</span></button>
  <span class="ml-tooltip" id="share-tip" role="tooltip" data-side="top" hidden>
    Copy a link to this page
    <span class="ml-tooltip-arrow" aria-hidden="true"></span>
  </span>
</span>

HTML

<script type="module">
  import { observe } from "@mlola-ui/behavior";
  observe();
</script>

Options

Prop	Values	Default
`placement`	`topbottomleftright`	`top`

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-tooltip-root`	—
`ml-tooltip`	`data-side="bottom \| left \| right \| top"`
`ml-tooltip-arrow`	—

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Dependencies

Installed alongside this component. No third-party UI runtime is ever added.

@mlola-ui/behavior

Open the standalone preview