Tooltip 10.18.1

ARIA

RTL

A method of presenting a text or supplementary description regarding an element, typically upon hovering, yet alternatively upon click or tap.

Based on Radix.

Anatomy

<Tooltip>
  <Tooltip.Trigger>...</Tooltip.Trigger>
  <Tooltip.Content>
    ...
    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip>

Default

"use client";

import { Tooltip, Chip } from "@heathmont/moon-core-tw";

const Default = () => (
  <Tooltip>
    <Tooltip.Trigger data-testid="tooltip-trigger">
      <Chip className="border border-beerus">Trigger</Chip>
    </Tooltip.Trigger>
    <Tooltip.Content>
      This is the default tooltip
      <Tooltip.Arrow />
    </Tooltip.Content>
  </Tooltip>
);

export default Default;

Arrow positions

You can use the position property in the Tooltip.Content component to customize where the tooltip appears.

"use client";

import { Tooltip, Chip } from "@heathmont/moon-core-tw";

const ArrowPositions = () => (
  <>
    <div className="grid grid-cols-2 xl:grid-cols-4 gap-2 w-full">
      <Tooltip>
        <Tooltip.Trigger>
          <Chip className="border border-beerus">top-start</Chip>
        </Tooltip.Trigger>
        <Tooltip.Content position="top-start">
          Top-start position
          <Tooltip.Arrow />
        </Tooltip.Content>
      </Tooltip>
      <Tooltip>
        <Tooltip.Trigger>
          <Chip className="border border-beerus">top-center (default)</Chip>
        </Tooltip.Trigger>
        <Tooltip.Content>
          Top-center is default position
          <Tooltip.Arrow />
        </Tooltip.Content>
      </Tooltip>
      <Tooltip>
        <Tooltip.Trigger>
          <Chip className="border border-beerus">top-end</Chip>
        </Tooltip.Trigger>
        <Tooltip.Content position="top-end">
          Top-end position
          <Tooltip.Arrow />
        </Tooltip.Content>
      </Tooltip>
      <Tooltip>
        <Tooltip.Trigger>
          <Chip className="border border-beerus">right</Chip>
        </Tooltip.Trigger>
        <Tooltip.Content position="right">
          Right side position
          <Tooltip.Arrow />
        </Tooltip.Content>
      </Tooltip>
      <Tooltip>
        <Tooltip.Trigger>
          <Chip className="border border-beerus">bottom-start</Chip>
        </Tooltip.Trigger>
        <Tooltip.Content position="bottom-start">
          Bottom-start position
          <Tooltip.Arrow />
        </Tooltip.Content>
      </Tooltip>
      <Tooltip>
        <Tooltip.Trigger>
          <Chip className="border border-beerus">bottom-center</Chip>
        </Tooltip.Trigger>
        <Tooltip.Content position="bottom-center">
          Bottom-center position
          <Tooltip.Arrow />
        </Tooltip.Content>
      </Tooltip>
      <Tooltip>
        <Tooltip.Trigger>
          <Chip className="border border-beerus">bottom-end</Chip>
        </Tooltip.Trigger>
        <Tooltip.Content position="bottom-end">
          Bottom-end position
          <Tooltip.Arrow />
        </Tooltip.Content>
      </Tooltip>
      <Tooltip>
        <Tooltip.Trigger>
          <Chip className="border border-beerus">left</Chip>
        </Tooltip.Trigger>
        <Tooltip.Content position="left">
          Left side position
          <Tooltip.Arrow />
        </Tooltip.Content>
      </Tooltip>
    </div>
  </>
);

export default ArrowPositions;

Render content into the specific element container

It is possible to render the HTML code of <Tooltip.Content /> in an alternate element container; by default, it appends to document.body. In this instance, the component is appended to the div#box.

"use client";

import { useState, useEffect } from "react";
import { Tooltip, Chip } from "@heathmont/moon-core-tw";

const Example = () => {
  const [container, setContainer] = useState<HTMLElement | null>(null);
  useEffect(() => {
    const box =
      (typeof document === "object" && document?.getElementById("box")) || null;
    setContainer(box);
  }, []);
  return (
    <>
      <div id="box" data-testid="box-container" />
      <Tooltip>
        <Tooltip.Trigger>
          <Chip className="border border-beerus">Trigger</Chip>
        </Tooltip.Trigger>
        <Tooltip.Content container={container}>
          This is the default tooltip
          <Tooltip.Arrow />
        </Tooltip.Content>
      </Tooltip>
    </>
  );
};

export default Example;

Customization

You can apply any CSS class to the <Tooltip.Content /> component for customization as needed.

"use client";

import { Tooltip, Chip } from "@heathmont/moon-core-tw";

const Customization = () => (
  <>
    <Tooltip>
      <Tooltip.Trigger>
        <Chip className="border border-beerus">Custom background color</Chip>
      </Tooltip.Trigger>
      <Tooltip.Content className="bg-chichi text-goku">
        Custom background color
        <Tooltip.Arrow className="bg-chichi text-goku" />
      </Tooltip.Content>
    </Tooltip>
    <Tooltip>
      <Tooltip.Trigger>
        <Chip className="border border-beerus">Custom fonts</Chip>
      </Tooltip.Trigger>
      <Tooltip.Content className="text-moon-18 text-krillin font-medium">
        Custom fonts
        <Tooltip.Arrow />
      </Tooltip.Content>
    </Tooltip>
    <Tooltip>
      <Tooltip.Trigger>
        <Chip className="border border-beerus">Without arrow</Chip>
      </Tooltip.Trigger>
      <Tooltip.Content>Without arrow</Tooltip.Content>
    </Tooltip>
    <Tooltip>
      <Tooltip.Trigger>
        <Chip className="border border-beerus">Without shadow</Chip>
      </Tooltip.Trigger>
      <Tooltip.Content className="shadow-none drop-shadow-none">
        Without shadow
        <Tooltip.Arrow />
      </Tooltip.Content>
    </Tooltip>
  </>
);

export default Customization;

Tooltip.Trigger

These are props specific to the Tooltip.Trigger component:

Name	Type	Default
className	string	-

Tooltip.Content

These are props specific to the Tooltip.Content component:

Name	Type	Default
className	string	-
position	enum	top-center
container	"HTMLElement" \| "null"	document.body