> ## Documentation Index
> Fetch the complete documentation index at: https://docs.equa.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# EquaTooltip

> Design system reference for EquaTooltip, including Storybook, Figma, screenshots, and usage guidance

# EquaTooltip

> **Last Verified:** 2026-05-20 | **Storybook source:** `equa-patternlib-nextjs/stories/EquaTooltip.stories.tsx`, Line: 7

## Purpose

Hover and focus explanatory text.

## Storybook

| Story         | Reference                                                                   |
| ------------- | --------------------------------------------------------------------------- |
| Default       | [Storybook](http://localhost:6006/?path=/story/equa-tooltip--default)       |
| Top           | [Storybook](http://localhost:6006/?path=/story/equa-tooltip--top)           |
| Bottom        | [Storybook](http://localhost:6006/?path=/story/equa-tooltip--bottom)        |
| Left          | [Storybook](http://localhost:6006/?path=/story/equa-tooltip--left)          |
| Right         | [Storybook](http://localhost:6006/?path=/story/equa-tooltip--right)         |
| With Delay    | [Storybook](http://localhost:6006/?path=/story/equa-tooltip--with-delay)    |
| Disabled      | [Storybook](http://localhost:6006/?path=/story/equa-tooltip--disabled)      |
| On Icon       | [Storybook](http://localhost:6006/?path=/story/equa-tooltip--on-icon)       |
| Rich Content  | [Storybook](http://localhost:6006/?path=/story/equa-tooltip--rich-content)  |
| All Positions | [Storybook](http://localhost:6006/?path=/story/equa-tooltip--all-positions) |

## API And Props

| Prop or Control | Source            | Notes                                |
| --------------- | ----------------- | ------------------------------------ |
| `position`      | Storybook control | See source story for accepted values |

Sources:

* `equa-patternlib-nextjs/src/components/tooltip/tooltip.tsx`, Line: 7
* `equa-patternlib-nextjs/src/components/tooltip/index.ts`
* `equa-patternlib-nextjs/stories/EquaTooltip.stories.tsx`, Line: 7

## Figma

UNVERIFIED -- requires Figma node assignment

## Screenshots

| State           | Asset                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Equa dark theme | <img src="https://mintcdn.com/equainc/KxDhtr750a40VJd3/images/design-system/components/equa-tooltip/equa-tooltip--default-equa.png?fit=max&auto=format&n=KxDhtr750a40VJd3&q=85&s=e693288a29cebae09c181427c7f4be51" alt="EquaTooltip dark theme" width="1366" height="900" data-path="images/design-system/components/equa-tooltip/equa-tooltip--default-equa.png" />          |
| Light theme     | <img src="https://mintcdn.com/equainc/KxDhtr750a40VJd3/images/design-system/components/equa-tooltip/equa-tooltip--default-light.png?fit=max&auto=format&n=KxDhtr750a40VJd3&q=85&s=bc904c5ed17ef70b8760d266efaaf856" alt="EquaTooltip light theme" width="1366" height="900" data-path="images/design-system/components/equa-tooltip/equa-tooltip--default-light.png" /> |

## Usage Notes

* Prefer this component over local one-off UI for matching product states.
* Keep new variants represented in Storybook before adding docs references here.
* Use token-backed colors, spacing, radius, and shadows from [Foundations](/architecture/design-system/foundations).

## Accessibility Notes

* Preserve keyboard and focus behavior from the source component.
* Any icon-only controls must provide an accessible label in consuming product code.
* Validate color contrast in both Equa dark and light theme screenshots before release.