@leafygreen-ui/info-sprinkle
v4.0.5
Published
LeafyGreen UI Kit Info Sprinkle
Downloads
269,044
Keywords
Readme
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
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.