# @synerise/ds-tooltip
> Tooltip UI Component for the Synerise Design System
Latest version **2.0.5** (published 2026-09-22) · ISC license · 0 weekly downloads
## Install
```sh
npm install @synerise/ds-tooltip
pnpm add @synerise/ds-tooltip
yarn add @synerise/ds-tooltip
bun add @synerise/ds-tooltip
```
## Health
**Score 55/100 (C)** — status: active.
Positive: no vulnerabilities; recently updated; high maintenance score.
Warnings: low downloads; no types; no esm support.
## Facts
| | |
|---|---|
| Version | 2.0.5 |
| Published | 2026-09-22 |
| First published | 2019-09-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | synerise |
## Links
- npm: https://www.npmjs.com/package/@synerise/ds-tooltip
- Repository: synerise/synerise-design
- npm.io page: https://npm.io/package/@synerise/ds-tooltip
## Recent versions
- 2.0.5 (latest) — 2026-09-22
- 2.0.4 — 2026-09-18
- 2.0.3 — 2026-09-16
- 2.0.2 — 2026-09-08
- 2.0.1 — 2026-09-02
- 2.0.0 — 2026-08-26
- 1.6.0 — 2026-08-18
- 1.5.5 — 2026-08-11
- 1.5.4 — 2026-07-23
- 1.5.3 — 2026-06-17
- 1.5.2 — 2026-06-11
- 1.5.1 — 2026-05-26
- 1.5.0 — 2026-05-22
- 1.4.19 — 2026-05-13
- 1.4.18 — 2026-05-04
- … 272 more at https://npm.io/package/@synerise/ds-tooltip/versions
## README
---
id: tooltip
title: Tooltip
---
Tooltip UI Component
## Tooltip
## API
| Property | Description | Type | Default |
| -------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
| button | Button to display in tooltip footer | ReactNode | - |
| description | Tooltip description text. Only rendered when `type` is `largeSimple` or `largeScrollable`. | ReactNode | - |
| disabled | Determines if tooltip is disabled — renders children directly without a wrapper | boolean | - |
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | `() => HTMLElement` | `() => document.body` |
| icon | Icon displayed inline before the title text | ReactNode | - |
| image | Image/node rendered between title and description | ReactNode | - |
| offset | Space between trigger and tooltip: `default` = 8 px, `small` = 4 px | `'default'` \| `'small'` | `'default'` |
| onOpenChange | Callback executed when visibility of the tooltip changes | `(newOpen: boolean) => void` | - |
| open | Controlled open state | boolean | - |
| overlayStyle | Inline style applied to the tooltip content wrapper | CSSProperties | - |
| placement | The position of the tooltip relative to the target | `'top'` \| `'topLeft'` \| `'topCenter'` \| `'topRight'` \| `'bottom'` \| `'bottomLeft'` \| `'bottomCenter'` \| `'bottomRight'` \| `'left'` \| `'leftTop'` \| `'leftBottom'` \| `'right'` \| `'rightTop'` \| `'rightBottom'` | `'top'` |
| popoverProps | Additional props forwarded to the underlying `` (escape hatch) | `Omit` | - |
| render | Custom render prop — when provided, all structured content props are ignored | `() => ReactNode` | - |
| shortCuts | Keyboard hint(s) rendered as styled key badges beside the title | `ReactNode \| ReactNode[]` | - |
| status | Content rendered above the title row (e.g. a status badge) | ReactNode | - |
| timeToHideAfterClick | Time in ms after which tooltip auto-hides when `trigger` includes `'click'`. `0` disables auto-hide. | number | `0` |
| title | Tooltip title text or node | ReactNode | - |
| trigger | Tooltip trigger mode | `'hover'` \| `'click'` \| `Array<'hover' \| 'click'>` | `'hover'` |
| type | Visual variant of the tooltip | `'default'` \| `'largeSimple'` \| `'largeScrollable'` | `'default'` |
| zIndex | CSS z-index for the floating layer | number | theme `zindex-tooltip` |
---
_Source: https://npm.io/package/@synerise/ds-tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._