Info Sprinkle

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' | 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.. | () => {} | | 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 | |

Note: The ref of this component will be the trigger icon but all props will spread to the internal <Tooltip/> component.