Navigation and interaction

Tooltip

Supplementary hover and focus description.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Tooltip } from "@cofob/design-system-react";

/**
 * Complete Tooltip parameter reference.
 * @param content
 *   type: renderable content
 *   required
 *   example: "Keyboard shortcuts"
 * @param trigger/children
 *   type: ReactElement | Svelte snippet | native trigger element
 *   required
 *   example: <IconButton label="Help" /> / trigger snippet
 * @param delay
 *   type: number (milliseconds)
 *   default: 1000
 *   example: 1000
 * @param placement
 *   type: "top" | "right" | "bottom" | "left"
 *   default: "top"
 *   example: "bottom"
 * @param span attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function TooltipExample() {
  return (
    <Tooltip content="Help"><button>?</button></Tooltip>
  );
}

Svelte

<script lang="ts">
  import { Tooltip } from "@cofob/design-system-svelte";

  // Complete Tooltip parameter reference.
  // content
  //   type: renderable content
  //   required
  //   example: "Keyboard shortcuts"
  // trigger/children
  //   type: ReactElement | Svelte snippet | native trigger element
  //   required
  //   example: <IconButton label="Help" /> / trigger snippet
  // delay
  //   type: number (milliseconds)
  //   default: 1000
  //   example: 1000
  // placement
  //   type: "top" | "right" | "bottom" | "left"
  //   default: "top"
  //   example: "bottom"
  // span attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Tooltip content="Help"><button>?</button></Tooltip>

HTML

<!--
  Complete Tooltip parameter reference.
  content
    type: renderable content
    required
    example: "Keyboard shortcuts"
  trigger/children
    type: ReactElement | Svelte snippet | native trigger element
    required
    example: <IconButton label="Help" /> / trigger snippet
  delay
    type: number (milliseconds)
    default: 1000
    example: 1000
  placement
    type: "top" | "right" | "bottom" | "left"
    default: "top"
    example: "bottom"
  span attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<span class="cf-tooltip" role="tooltip" data-cf-tooltip>Help</span>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-tooltip`
Adapters	Native · React · Svelte
Primary props	content · trigger/children · delay · placement · span attributes
Documented states	closed · hover · focus · Escape
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`content`required	`renderable content`	`required`	React · Svelte · HTML	`"Keyboard shortcuts"`	Tooltip text or tab/disclosure content.
`trigger/children`required	`ReactElement \| Svelte snippet \| native trigger element`	`required`	React · Svelte · HTML	`<IconButton label="Help" /> / trigger snippet`	The focusable element described by the tooltip.
`delay`	`number (milliseconds)`	`1000`	React · Svelte · HTML	`1000`	Hover delay; keyboard focus remains immediate.
`placement`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	React · Svelte · HTML	`"bottom"`	Preferred side; collision handling may choose a safer position.
`span attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.