# @commercetools-uikit/tooltip
> Tooltips display informative text when users hover over or focus on an element.
Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install @commercetools-uikit/tooltip
pnpm add @commercetools-uikit/tooltip
yarn add @commercetools-uikit/tooltip
bun add @commercetools-uikit/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 | 20.6.7 |
| Published | 2026-07-17 |
| First published | 2019-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 164.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 154 |
| Maintainers | emmenko, commercetools-admin, tdeekens |
| Keywords | javascript, typescript, design-system, react, uikit |
## Links
- npm: https://www.npmjs.com/package/@commercetools-uikit/tooltip
- Repository: https://github.com/commercetools/ui-kit
- Homepage: https://uikit.commercetools.com
- Issues: https://github.com/commercetools/ui-kit/issues
- npm.io page: https://npm.io/package/@commercetools-uikit/tooltip
## Dependencies (12)
- [lodash](https://npm.io/package/lodash.md) 4.18.1
- [react-is](https://npm.io/package/react-is.md) 19.2.6
- [popper.js](https://npm.io/package/popper.js.md) ^1.15.0
- [use-popper](https://npm.io/package/use-popper.md) 1.1.6
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.5
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.5
- [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.20.13
- [@commercetools-uikit/hooks](https://npm.io/package/@commercetools-uikit/hooks.md) ^20.6.7
- [@commercetools-uikit/utils](https://npm.io/package/@commercetools-uikit/utils.md) ^20.6.7
- [@commercetools-uikit/constraints](https://npm.io/package/@commercetools-uikit/constraints.md) ^20.6.7
- [@commercetools-uikit/design-system](https://npm.io/package/@commercetools-uikit/design-system.md) ^20.6.7
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 20.6.7 (latest) — 2026-07-17
- 0.0.0-canary-20260831181816 (canary) — 2026-08-31
- 0.0.0-FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize-20260518121756 (FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize) — 2026-05-18
- 0.0.0-migration-pnpm-20260513114959 (migration-pnpm) — 2026-05-13
- 0.0.0-CRAFT-2040-rich-text-input-destroys-hyperlink-tag-20260219190637 (CRAFT-2040-rich-text-input-destroys-hyperlink-tag) — 2026-02-19
- 0.0.0-fec-155-react-19-20250528075244 (fec-155-react-19) — 2025-05-28
- 0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339 (FCT-1500-adjust-legacy-css-reset) — 2025-05-27
- 0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254 (SUPPORT-32352-de-ch-money-input) — 2025-05-09
- 0.0.0-main-20250115172531 (main) — 2025-01-15
- 0.0.0-preview-fec-155-react-19-20250113184401 (preview-fec-155-react-19) — 2025-01-13
- 0.0.0-preview-test-icon-entrypoints-20241212201418 (preview-test-icon-entrypoints) — 2024-12-12
- 0.0.0-preview-test-icon-pure-annotations-20241211181046 (preview-test-icon-pure-annotations) — 2024-12-11
- 0.0.0-preview-test-icon-bundle-20241210182318 (preview-test-icon-bundle) — 2024-12-10
- 0.0.0-preview-test-canary-preview-20241204111237 (preview-test-canary-preview) — 2024-12-04
- 0.0.0-preview-FCT-1187-20241024123200 (preview) — 2024-10-24
- … 1042 more at https://npm.io/package/@commercetools-uikit/tooltip/versions
## README
# Tooltip
## Description
Tooltips display informative text when users hover over or focus on an element.
## Installation
```
pnpm add @commercetools-uikit/tooltip
```
```
npm --save install @commercetools-uikit/tooltip
```
Additionally install the peer dependencies (if not present)
```
pnpm add react
```
```
npm --save install react
```
## Usage
```jsx
import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import styled from '@emotion/styled';
import Tooltip from '@commercetools-uikit/tooltip';
/* 1. Standard example */
const ExampleStandard = () => (
);
/**
* 2. Working with disabled child elements
*
* When you use a tooltip with a disabled element, you should define the
* style `pointer-events: none` to the disabled element to stop it from capturing events.
* The Button components from UIKit already support this functionality.
*/
const ExampleWithDisabledElements = () => (
);
/**
* 3. Customizing the wrapper
*
* The tooltip applies event listeners (`onMouseOver`, `onMouseLeave`, `onFocus`,
* and `onBlur`) to a wrapping `div` component around the children element.
* By default, this wrapper is displayed with style `inline-block`.
* If you want to customize this behaviour, then you can pass in a custom element.
* Be sure to use `React.forwardRef`, as we need the to pass the ref to the wrapper.
*/
const Wrapper = forwardRef((props, ref) => (
{props.children}
));
Wrapper.propTypes = {
children: PropTypes.node.isRequired,
};
const FullWidthButton = styled.button`
display: block;
width: 100%;
`;
const ExampleWithCustomWrapper = () => (
Submit
);
/**
* 4. Customizing the tooltip body
*
* You can customize the look and feel of the tooltip body by passing in a custom `BodyComponent`.
*/
const Body = styled.div`
color: red;
`;
const ExampleWithCustomBody = () => (
);
/**
* 5. Customizing where the portal is rendered
*
* When you are dealing with virtualized components, it can be useful to render
* the tooltip into another part of the document.
* You can define a `TooltipWrapperComponent` to do this.
*/
const Portal = (props) => ReactDOM.createPortal(props.children, document.body);
const ExampleWithCustomPortal = () => (
);
/**
* 6. Conditionally displaying tooltips
*
* There may be cases when you only want to enable the display of a tooltip under
* a certain condition. In these cases, you may want to use the `off` prop.
* In the following example, the tooltip text only appears on hover when the button is disabled.
*/
const ExampleWithConditionals = (props) => (
);
ExampleWithConditionals.propTypes = {
isDisabled: PropTypes.bool,
};
/**
* 7. Fine-tuning underlying Popper.js behavior
*
* This component uses [Popper.js](https://popper.js.org/) under the hood.
* Popper provides a way to adjust how tooltip element should behave, by providing
* a [set of `modifiers`](https://popper.js.org/popper-documentation.html#modifiers).
* For instance, forcing tooltip to stay in the original placement and not to try
* flipping when it's getting out of boundaries, can be implemented as following:
*/
const ExampleWithCustomPopperBehavior = (props) => (
);
ExampleWithCustomPopperBehavior.propTypes = {
isDisabled: PropTypes.bool,
};
export {
ExampleStandard,
ExampleWithDisabledElements,
ExampleWithCustomWrapper,
ExampleWithCustomBody,
ExampleWithCustomPortal,
ExampleWithConditionals,
ExampleWithCustomPopperBehavior,
};
```
## Properties
| Props | Type | Required | Default | Description |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------: | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | `ReactElement` | ✅ | | |
| `showAfter` | `number` | | `300` | Delay (in milliseconds) between the start of the user interaction, and showing the tooltip. |
| `closeAfter` | `number` | | `200` | Delay (in milliseconds) between the end of the user interaction, and the closing of the tooltip. |
| `styles` | `Record` | | | Custom css-in-js object styles for the tooltip body. |
| `off` | `boolean` | | `false` | Determines if the tooltip should not appear. |
| `id` | `string` | | | An identifier for the tooltip, used for `aria-describedby`. |
| `onClose` | `Function` [See signature.](#signature-onclose) | | | A callback function, called when the tooltip is closing. |
| `onOpen` | `Function` [See signature.](#signature-onopen) | | | A callback function, called when the tooltip is opening. |
| `isOpen` | `boolean` | | | |
| `placement` | `union` Possible values: `, 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'` | | `'top'` | How the tooltip is positioned relative to the child element. |
| `title` | `string` | ✅ | | The message to show in the tooltip. |
| `modifiers` | `Modifiers` | | | Provides a way to fine-tune an appearance of underlying Popper tooltip element. For more information, please check [Popper.js documentation](https://popper.js.org/popper-documentation.html#modifiers). |
| `components` | `Object` [See signature.](#signature-components) | | | Customize the appearance of certain elements of the tooltip. |
| `horizontalConstraint` | `union` Possible values: `, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the tooltip. |
## Signatures
### Signature `onClose`
```ts
(e?: ChangeEvent | FocusEvent) => void
```
### Signature `onOpen`
```ts
(e?: ChangeEvent | FocusEvent) => void
```
### Signature `components`
```ts
{
/**
* The component rendered as the tooltip body.
*/
BodyComponent?: ComponentType;
/**
* Where the tooltip should be rendered. This can be useful to render the tooltip into another part of the document, using React portal.
*/
TooltipWrapperComponent?: ComponentType;
/**
* A custom component wrapper for the tooltip.
*/
WrapperComponent?: ComponentType;
}
```
---
_Source: https://npm.io/package/@commercetools-uikit/tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._