Info Sprinkle

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/info-sprinkle

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

Properties

| Prop | Type | Description | Default | | -------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | | open | boolean | Controls the component, and determines whether or not the <Tooltip /> 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 <Tooltip /> 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 <Tooltip /> should close when a user tries to close it. | () => true | | align | 'top', 'bottom', 'left', 'right' | Determines the preferred alignment of the <Tooltip /> 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 <Tooltip /> 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 <Tooltip /> will appear in dark mode. | false | | id | string | id applied to <Tooltip /> component | | | className | string | Applies a className to Tooltip container | | | children | node | Content that will be rendered inside of <Tooltip /> | | | 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<ComponentProps<'button'>, '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 <Tooltip/> component.