# @askrjs/ui/tooltip

> Published API exports for @askrjs/ui/tooltip.

Source: [https://askrjs.com/docs/reference/api/ui/tooltip](https://askrjs.com/docs/reference/api/ui/tooltip)

Status: stable. Packages: @askrjs/ui/tooltip.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 14 exports from the declarations shipped by @askrjs/ui.

### `Tooltip`

```ts
Tooltip: (props: TooltipProps) => JSX.Element
```

Renders a part of `tooltip`.

### `TOOLTIP_A11Y_CONTRACT`

```ts
TOOLTIP_A11Y_CONTRACT: { readonly CONTENT_ROLE: "tooltip"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; readonly TRIGGER_ATTRIBUTE: "aria-describedby"; readonly OPEN_STATE_ATTRIBUTE: "data-state"; }
```

Tooltip accessibility contract.

### `TooltipA11yContract`

```ts
TooltipA11yContract: typeof TOOLTIP_A11Y_CONTRACT
```

Type of the Tooltip A11y Contract object.

### `TooltipContent`

```ts
TooltipContent: { (props: TooltipContentProps): JSX.Element | null; (props: TooltipContentAsChildProps): JSX.Element | null; }
```

Renders the `tooltip-content` part of `tooltip` with `role="tooltip"`.

Supports polymorphic rendering via `asChild`.

### `TooltipContentAsChildProps`

```ts
TooltipContentAsChildProps: BoxAsChildProps & TooltipContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Tooltip Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `TooltipContentOwnProps`

```ts
TooltipContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}
```

Own props for Tooltip Content, before merging with native element attributes.

- `align`: align?: OverlayAlign | undefined;

- `forceMount`: forceMount?: boolean | undefined;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `TooltipContentProps`

```ts
TooltipContentProps: BoxProps<'div', HTMLDivElement> & TooltipContentOwnProps
```

Props for Tooltip Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `TooltipOwnProps`

```ts
TooltipOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}
```

Own props for Tooltip, before merging with native element attributes.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `TooltipPortal`

```ts
TooltipPortal: (props: TooltipPortalProps) => JSX.Element | null
```

Renders a part of `tooltip`.

### `TooltipPortalProps`

```ts
TooltipPortalProps: {
  children?: unknown;
}
```

Props for Tooltip Portal.

- `children`: children?: unknown;

### `TooltipProps`

```ts
TooltipProps: TooltipOwnProps
```

Props for Tooltip.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `TooltipTrigger`

```ts
TooltipTrigger: { (props: TooltipTriggerProps): JSX.Element; (props: TooltipTriggerAsChildProps): JSX.Element; }
```

Renders the `tooltip-trigger` part of `tooltip`.

Supports polymorphic rendering via `asChild`.

### `TooltipTriggerAsChildProps`

```ts
TooltipTriggerAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Tooltip Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `TooltipTriggerProps`

```ts
TooltipTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Tooltip Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/toast/index.md) | [Next](https://askrjs.com/docs/reference/api/vite/root/index.md)