Standard duskmoon implemented 7 demos

Tooltip

Tooltip adds short explanatory text to compact controls.

Import @duskmoon-dev/components/tooltip

3 API sections

7 documented props

5 behavior scenarios

Key API

titleplacementopendefaultOpenarrowsize

Usage

When to use

Use it when supporting content should stay attached to a trigger or task context.
Prefer controlled open state when the surrounding workflow needs to react to dismissal.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Contextual surface

Documents trigger, placement, and open-state patterns for content rendered above the page.

Dismissal behavior

Highlights controlled state and close callbacks where overlays expose them.

Primary API surface

Tooltip is most often configured through `title`, `placement`, `open`, `defaultOpen`.

Covered behavior

Renders child content

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Tooltip from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Tooltip } from "@duskmoon-dev/components/tooltip";

export function Example() {
  return (<Tooltip
  title="Review details"
  placement="bottom"
  size="lg"
  open
>
  Hover for details
</Tooltip>);
}

Preview

Renders child content

test-backed

Tooltip scenario from the component test coverage: renders child content.

Source

import "@duskmoon-dev/components/styles.css";
import { Tooltip } from "@duskmoon-dev/components/tooltip";

export function TooltipRendersChildContentDemo() {
  return (<Tooltip
  title="Review details"
  placement="bottom"
  size="lg"
  open
>
  Hover for details
</Tooltip>);
}

Preview

Renders title in tooltip element

test-backed

Tooltip scenario from the component test coverage: renders title in tooltip element.

Source

import "@duskmoon-dev/components/styles.css";
import { Tooltip } from "@duskmoon-dev/components/tooltip";

export function TooltipRendersTitleInTooltipDemo() {
  return (<Tooltip
  title="Review details"
  placement="bottom"
  size="lg"
  open
>
  Hover for details
</Tooltip>);
}

Preview

Supports placement, size, arrow, and custom className

test-backed

Tooltip scenario from the component test coverage: supports placement, size, arrow, and custom classname.

Source

import "@duskmoon-dev/components/styles.css";
import { Tooltip } from "@duskmoon-dev/components/tooltip";

export function TooltipSupportsPlacementSizeArrowDemo() {
  return (<Tooltip
  title="Review details"
  placement="bottom"
  size="lg"
  open
>
  Hover for details
</Tooltip>);
}

Preview

Opens and closes on hover when uncontrolled

test-backed

Tooltip scenario from the component test coverage: opens and closes on hover when uncontrolled.

Source

import "@duskmoon-dev/components/styles.css";
import { Tooltip } from "@duskmoon-dev/components/tooltip";

export function TooltipOpensAndClosesOnDemo() {
  return (<Tooltip
  title="Review details"
  placement="bottom"
  size="lg"
  open
>
  Hover for details
</Tooltip>);
}

Preview

Forwards wrapper ref

test-backed

Tooltip scenario from the component test coverage: forwards wrapper ref.

Source

import "@duskmoon-dev/components/styles.css";
import { Tooltip } from "@duskmoon-dev/components/tooltip";

export function TooltipForwardsWrapperRefDemo() {
  return (<Tooltip
  title="Review details"
  placement="bottom"
  size="lg"
  open
>
  Hover for details
</Tooltip>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Tooltip
  title="Review details"
  placement="bottom"
  size="lg"
  open
>
  Hover for details
</Tooltip>
</div>

<div data-theme="moonlight">
  <Tooltip
  title="Review details"
  placement="bottom"
  size="lg"
  open
>
  Hover for details
</Tooltip>
</div>

API

The API reference below lists every parsed exported type or interface for Tooltip. Start with `title`, `placement`, `open`, `defaultOpen` for common usage.

Types: packages/components/src/components/tooltip/Tooltip.types.ts Scenarios: packages/components/src/components/tooltip/Tooltip.test.tsx

TooltipProps interface extends Omit<ComponentProps<"span">, "title">

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures Tooltip.
`placement`	`TooltipPlacement`	No	placement configures Tooltip.
`open`	`boolean`	No	open configures Tooltip.
`defaultOpen`	`boolean`	No	defaultOpen configures Tooltip.
`arrow`	`boolean`	No	arrow configures Tooltip.
`size`	`TooltipSize`	No	size configures Tooltip.
`children`	`ReactNode`	Yes	children configures Tooltip.

TooltipPlacement type

"top" | "bottom" | "left" | "right"

TooltipSize type

"sm" | "md" | "lg"