# @leafygreen-ui/tooltip
> LeafyGreen UI Kit Tooltip
Latest version **14.3.2** (published 2026-07-17) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @leafygreen-ui/tooltip
pnpm add @leafygreen-ui/tooltip
yarn add @leafygreen-ui/tooltip
bun add @leafygreen-ui/tooltip
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 14.3.2 |
| Published | 2026-07-17 |
| First published | 2019-10-31 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 308.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 271 |
| Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck |
## Links
- npm: https://www.npmjs.com/package/@leafygreen-ui/tooltip
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/tooltip
- Issues: https://jira.mongodb.org/projects/PD/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/tooltip
## Dependencies (10)
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [polished](https://npm.io/package/polished.md) ^4.2.2
- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.0
- [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.9.0
- [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.3.1
- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.2
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.0
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.2
- [@leafygreen-ui/popover](https://npm.io/package/@leafygreen-ui/popover.md) ^14.3.2
- [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.2.4
## Recent versions
- 14.3.2 (latest) — 2026-07-17
- 11.0.1-popover.0 (popover) — 2024-01-16
- 10.0.5 (beta) — 2023-07-26
- 11.0.0-alpha.1 (alpha) — 2023-07-20
- 10.0.2-next.7 (next) — 2023-05-26
- 7.1.2-test.0 (test) — 2022-09-22
- 14.3.1 — 2026-01-21
- 14.3.0 — 2025-11-24
- 14.2.3 — 2025-11-13
- 14.2.2 — 2025-10-31
- 14.2.1 — 2025-10-21
- 14.2.0 — 2025-10-07
- 14.1.4 — 2025-09-25
- 14.1.3 — 2025-09-10
- 14.1.2 — 2025-09-03
- … 114 more at https://npm.io/package/@leafygreen-ui/tooltip/versions
## README
# Tooltip
#### [View on MongoDB.design](https://www.mongodb.design/component/tooltip/live-example/)
## Installation
### PNPM
```shell
pnpm add @leafygreen-ui/tooltip
```
### Yarn
```shell
yarn add @leafygreen-ui/tooltip
```
### NPM
```shell
npm install @leafygreen-ui/tooltip
```
## Example
```js
import Tooltip from '@leafygreen-ui/tooltip';
trigger}
triggerEvent="hover"
darkMode={true}
>
I am an uncontrolled Tooltip!
;
```
## Properties
| Prop | Type | Description | Default |
| ----------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| `open` | `boolean` | Controls the component, and determines whether or not the `` will appear open or closed. | `false` |
| `setOpen` | `function` | If controlling the component, pass state handling function to setOpen prop. This will keep the consuming application's state in-sync with LeafyGreen's state, while the `` component responds to events such as backdrop clicks and a user pressing the Escape key. | `(boolean) => boolean` |
| `initialOpen` | `boolean` | Passes an initial "open" value to an uncontrolled Tooltip. | `false` |
| `shouldClose` | `function` | Callback that should return a boolean that determines whether or not the `` should close when a user tries to close it. | `() => true` |
| `align` | `'top'`, `'bottom'`, `'left'`, `'right'` | Determines the preferred alignment of the `` component relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element. | `'top'` |
| `justify` | `'start'`, `'middle'`, `'end'` | Determines the preferred justification of the `` component (based on the alignment) relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element. | `'start'` |
| `trigger` | `function`, `React.ReactNode` | A `React.ReactNode` against which the `` will be positioned, and what will be used to trigger the opening and closing of the `Tooltip` component, when the `Tooltip` is uncontrolled. If no `trigger` is passed, the `Tooltip` will be positioned against its nearest parent element. If using a `ReactNode` or inline function, trigger signature is: ({children, ...rest}) => (). When using a function, you must pass `children` as an argument in order for the tooltip to render. | |
| `triggerEvent` | `'hover'`, `'click'` | DOM event that triggers opening/closing of `` component | `'hover'` |
| `darkMode` | `boolean` | Determines if the `` will appear in dark mode. | `false` |
| `id` | `string` | `id` applied to `` component | |
| `className` | `string` | Applies a className to Tooltip container | |
| `children` | `node` | Content that will be rendered inside of `` | |
| `enabled` | `boolean` | Enables Tooltip to trigger based on the event specified by `triggerEvent`. | `true` |
| `onClose` | `function` | Callback that is called when the tooltip is closed internally. E.g. on ESC press, on backdrop click, on blur.. | |
| `renderMode` | `'inline'` \| `'portal'` \| `'top-layer'` | Options to render the popover element \* [deprecated] `'inline'` will render the popover element inline in the DOM where it's written \* [deprecated] `'portal'` will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer` \* `'top-layer'` will render the popover element in the top layer | `'top-layer'` |
| `portalContainer` | `HTMLElement` \| `null` | Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same refrence to `scrollContainer` and `portalContainer`. | |
| `scrollContainer` | `HTMLElement` \| `null` | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly. | |
| `portalClassName` | `string` | Passes the given className to the popover's portal container if the default portal container is being used. | |
| `popoverZIndex` | `number` | Sets the z-index CSS property for the popover. | |
| `baseFontSize` | `13` \| `16` | Allows consuming applications to override font-size as set by the LeafyGreen Provider. This prop is only considered when `variant` is `'default'`. | default to value set by LeafyGreen Provider |
| `variant` | `'default'` \| `'compact'` | Variant of the tooltip to be rendered. | `'default'` |
| ... | native `div` attributes | Any other props will be spread on the root `div` element | |
### External tooltip triggers
When defining a tooltip trigger as a separate element, ensure the `refEl` is defined on the `` element, and use the `useTooltipTriggerEventHandlers` hook to create tooltip event handlers.
```tsx
const triggerRef = useRef();
const [open, setOpen] = useState(false);
const tooltipEventHandlers = useTooltipTriggerEventHandlers({
triggerEvent: TriggerEvent.Hover,
setState: setOpen,
onFocus: e => {
console.log(e);
}, // side effects called on focus of the trigger
});
return (
<>
Content
);
```
---
_Source: https://npm.io/package/@leafygreen-ui/tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._