Density

Tooltip

Tooltip composes Base UI’s tooltip primitives for short, contextual explanations.

import { Tooltip } from "density-base-ui";

export default function TooltipExample() {
  return (
    <Tooltip content="95% of requests finish under this time.">
      <span data-dn-presentation="label">Latency p95</span>
    </Tooltip>
  );
}

Props

Prop Attribute Values Default
children None React node Required
content None React node Required
padding data-dn-padding none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl sm
presentation data-dn-presentation card card
depth data-dn-depth 1, 2, 3, 4, 5, 6, 7 1

Padding

import { Tooltip } from "density-base-ui";

export default function TooltipPaddingExample() {
  return (
    <div style={{ display: "flex", gap: "1rem" }}>
      <Tooltip content="No padding" padding="none">
        <span data-dn-presentation="label">None</span>
      </Tooltip>
      <Tooltip content="Extra extra small" padding="2xs">
        <span data-dn-presentation="label">2xs</span>
      </Tooltip>
      <Tooltip content="Extra small" padding="xs">
        <span data-dn-presentation="label">xs</span>
      </Tooltip>
      <Tooltip content="Small" padding="sm">
        <span data-dn-presentation="label">sm</span>
      </Tooltip>
      <Tooltip content="Medium" padding="md">
        <span data-dn-presentation="label">md</span>
      </Tooltip>
      <Tooltip content="Large" padding="lg">
        <span data-dn-presentation="label">lg</span>
      </Tooltip>
      <Tooltip content="Extra large" padding="xl">
        <span data-dn-presentation="label">xl</span>
      </Tooltip>
      <Tooltip content="Extra extra large" padding="2xl">
        <span data-dn-presentation="label">2xl</span>
      </Tooltip>
      <Tooltip content="Three extra large" padding="3xl">
        <span data-dn-presentation="label">3xl</span>
      </Tooltip>
    </div>
  );
}

Depth

import { Tooltip } from "density-base-ui";

export default function TooltipDepthExample() {
  return (
    <div style={{ display: "flex", gap: "1rem" }}>
      <Tooltip content="Depth 1" depth="1">
        <span data-dn-presentation="label">Depth 1</span>
      </Tooltip>
      <Tooltip content="Depth 2" depth="2">
        <span data-dn-presentation="label">Depth 2</span>
      </Tooltip>
      <Tooltip content="Depth 3" depth="3">
        <span data-dn-presentation="label">Depth 3</span>
      </Tooltip>
      <Tooltip content="Depth 4" depth="4">
        <span data-dn-presentation="label">Depth 4</span>
      </Tooltip>
      <Tooltip content="Depth 5" depth="5">
        <span data-dn-presentation="label">Depth 5</span>
      </Tooltip>
      <Tooltip content="Depth 6" depth="6">
        <span data-dn-presentation="label">Depth 6</span>
      </Tooltip>
      <Tooltip content="Depth 7" depth="7">
        <span data-dn-presentation="label">Depth 7</span>
      </Tooltip>
    </div>
  );
}