Density

Tooltip

Tooltip composes Base UI’s tooltip primitives for short, contextual explanations tied to a consumer-owned trigger element.

Hover over me
import { Tooltip, Label } from "density-base-ui";

export default function TooltipExample() {
  return (
    <Tooltip trigger={<Label>Hover over me</Label>} content="I'm a tooltip!" />
  );
}

Padding

NonePadding enabled
import { Tooltip, View, Label } from "density-base-ui";

export default function TooltipPaddingExample() {
  return (
    <View orientation="horizontal" padding={false}>
      <Tooltip
        trigger={<Label>None</Label>}
        content="No padding"
        padding={false}
      />
      <Tooltip
        trigger={<Label>Padding enabled</Label>}
        content="Size-derived padding"
      />
    </View>
  );
}