# @leafygreen-ui/info-sprinkle > LeafyGreen UI Kit Info Sprinkle Latest version **5.0.12** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @leafygreen-ui/info-sprinkle pnpm add @leafygreen-ui/info-sprinkle yarn add @leafygreen-ui/info-sprinkle bun add @leafygreen-ui/info-sprinkle ``` ## 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 | 5.0.12 | | Published | 2026-10-02 | | First published | 2023-10-05 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 6 | | Unpacked size | 81.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 274 | | Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck | ## Links - npm: https://www.npmjs.com/package/@leafygreen-ui/info-sprinkle - Repository: https://github.com/mongodb/leafygreen-ui - Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/info-sprinkle - Issues: https://jira.mongodb.org/projects/PD/summary - npm.io page: https://npm.io/package/@leafygreen-ui/info-sprinkle ## Dependencies (6) - [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1 - [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.9.1 - [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3 - [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1 - [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3 - [@leafygreen-ui/tooltip](https://npm.io/package/@leafygreen-ui/tooltip.md) ^14.3.3 ## Recent versions - 5.0.12 (latest) — 2026-10-02 - 1.0.3-popover.0 (popover) — 2024-01-16 - 5.0.11 — 2026-01-21 - 5.0.10 — 2025-11-24 - 5.0.9 — 2025-11-13 - 5.0.8 — 2025-10-31 - 5.0.7 — 2025-10-21 - 5.0.6 — 2025-09-25 - 5.0.5 — 2025-09-10 - 5.0.4 — 2025-09-03 - 5.0.3 — 2025-07-03 - 5.0.2 — 2025-06-30 - 5.0.1 — 2025-06-16 - 5.0.0 — 2025-05-29 - 4.0.14 — 2025-05-19 - … 23 more at https://npm.io/package/@leafygreen-ui/info-sprinkle/versions ## README # Info Sprinkle ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/info-sprinkle.svg) #### [View on MongoDB.design](https://www.mongodb.design/component/info-sprinkle/live-example/) ## Installation ### PNPM ```shell pnpm add @leafygreen-ui/info-sprinkle ``` ### Yarn ```shell yarn add @leafygreen-ui/info-sprinkle ``` ### NPM ```shell npm install @leafygreen-ui/info-sprinkle ``` ## Example ```js import { InfoSprinkle } from `@leafygreen-ui/info-sprinkle`; {}, onMouseOver: () => {}, 'aria-label': 'aria-label', }}> I'm an info sprinkle ``` ## Properties ## 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'` | | `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.. | `() => {}` | | `baseFontSize` | `13` \| `16` | font-size applied to typography element | default to value set by LeafyGreen Provider | | `triggerProps` | `Omit, 'ref'>` | Trigger props, excludes `ref` | | | ... | native `div` attributes | Any other props will be spread on the root `div` element | | **Note:** The `ref` of this component will be the trigger icon but all props will spread to the internal `` component. --- _Source: https://npm.io/package/@leafygreen-ui/info-sprinkle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._