Tooltip

A non-interactive floating label anchored to a trigger element. Tooltips appear on hover and keyboard focus, and disappear when the user moves away. Use them to describe controls whose purpose isn't fully obvious from their visible label.

Playground

Controls

Content

Placement

Disabled

Background

Color

Theme

HTMLReact

ShareCopy

Usage

<lt-tooltip content="Above" placement="top"><button>Top</button></lt-tooltip>
<lt-tooltip content="Below" placement="bottom"><button>Bottom</button></lt-tooltip>
<lt-tooltip content="Start side" placement="start"><button>Start</button></lt-tooltip>
<lt-tooltip content="End side" placement="end"><button>End</button></lt-tooltip>

<lt-tooltip content="Primary" background="--lt-color-primary-600" color="#fff">
<button>Token bg</button>
</lt-tooltip>

<lt-tooltip content="You can't do that" disabled>
<button disabled>Locked</button>
</lt-tooltip>

import { Tooltip } from '@latty-ds/react';

<Tooltip content="Above" placement="top">
<button>Top</button>
</Tooltip>
<Tooltip content="Below" placement="bottom">
<button>Bottom</button>
</Tooltip>
<Tooltip content="Start side" placement="start">
<button>Start</button>
</Tooltip>
<Tooltip content="End side" placement="end">
<button>End</button>
</Tooltip>

<Tooltip content="Primary" background="--lt-color-primary-600" color="#fff">
<button>Token bg</button>
</Tooltip>

<template>
<lt-tooltip content="Above" placement="top"><button>Top</button></lt-tooltip>
<lt-tooltip content="Below" placement="bottom"><button>Bottom</button></lt-tooltip>
<lt-tooltip content="Start side" placement="start"><button>Start</button></lt-tooltip>
<lt-tooltip content="End side" placement="end"><button>End</button></lt-tooltip>

<lt-tooltip content="Primary" background="--lt-color-primary-600" color="#fff">
  <button>Token bg</button>
</lt-tooltip>
</template>

API