@leafygreen-ui/info-sprinkle NPM

Info Sprinkle

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/info-sprinkle

NPM

npm install @leafygreen-ui/info-sprinkle

Example

import { InfoSprinkle } from `@leafygreen-ui/info-sprinkle`;

<InfoSprinkle
  triggerProps={{
    onMouseDown: () => {},
    onMouseOver: () => {},
    'aria-label': 'aria-label',
  }}>
  I'm an info sprinkle
</InfoSprinkle>

Properties

Prop	Type	Description	Default
`children`	`React.ReactNode`	String that will be rendered inside of `<InfoSprinkle />`
`open`	`boolean`	Controls the component, and determines whether or not the `<InfoSprinkle />` 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 `<InfoSprinkle />` component responds to events such as backdrop clicks and a user pressing the Escape key.	`(boolean) => boolean`
`shouldClose`	`function`	Callback that should return a boolean that determines whether or not the `<InfoSprinkle />` should close when a user tries to close it.	`() => true`
`align`	`'top'`, `'bottom'`, `'left'`, `'right'`	Determines the preferred alignment of the `<InfoSprinkle />` component relative to the element passed to the `trigger` prop.	`'top'`
`justify`	`'start'`, `'middle'`, `'end'`, `'fit'`	Determines the preferred justification of the `<InfoSprinkle />` component (based on the alignment) relative to the element passed to the `trigger` prop.	`'start'`
`darkMode`	`boolean`	Determines if the `<InfoSprinkle />` will appear in dark mode.	`false`
`id`	`string`	`id` applied to `<InfoSprinkle />` component
`className`	`string`	Applies a className to Tooltip container
`triggerProps`	native `span` attributes	Props passed to the trigger	`{}`
`enabled`	`boolean`	Enables Tooltip to trigger.	`true`
`onClose`	`function`	Callback that is called when the tooltip is closed internally. E.g. on ESC press, on backdrop click, on blur..	`() => {}`
`usePortal`	`boolean`	Determines if the Tooltip will be rendered within a portal.	`true`
`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`	font-size applied to typography element	default to value set by LeafyGreen Provider
...	native `div` attributes	Any other props will be spread on the tooltip element