Tooltip

!npm (scoped)

#### View on MongoDB.design

Installation

$3

``shell
pnpm add @leafygreen-ui/tooltip
`

$3

`shell
yarn add @leafygreen-ui/tooltip
`

$3

`shell
npm install @leafygreen-ui/tooltip
`

Example

`js
import Tooltip from '@leafygreen-ui/tooltip';

align="top"
justify="start"
trigger={trigger}
triggerEvent="hover"
darkMode={true}
>
I am an uncontrolled Tooltip!
;
`

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' |
| trigger | function, React.ReactNode | A React.ReactNode against which the will be positioned, and what will be used to trigger the opening and closing of the Tooltip component, when the Tooltip is uncontrolled. If no trigger is passed, the Tooltip will be positioned against its nearest parent element. If using a ReactNode or inline function, trigger signature is: ({children, ...rest}) => (trigger {children}). When using a function, you must pass children as an argument in order for the tooltip to render. | |
| triggerEvent | 'hover', 'click' | DOM event that triggers opening/closing of component | 'hover' |
| 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.. | |
| renderMode | 'inline' \| 'portal' \| 'top-layer' | Options to render the popover element
\ [deprecated] 'inline' will render the popover element inline in the DOM where it's written
\ [deprecated] 'portal' will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided portalContainer
\* 'top-layer' will render the popover element in the top layer | 'top-layer' |
| 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 | Allows consuming applications to override font-size as set by the LeafyGreen Provider. This prop is only considered when variant is 'default'. | default to value set by LeafyGreen Provider |
| variant | 'default' \| 'compact' | Variant of the tooltip to be rendered. | 'default' |
| ... | native div attributes | Any other props will be spread on the root div element | |

$3

When defining a tooltip trigger as a separate element, ensure the refEl is defined on the element, and use the useTooltipTriggerEventHandlers hook to create tooltip event handlers.

`tsx
const triggerRef = useRef();
const [open, setOpen] = useState(false);
const tooltipEventHandlers = useTooltipTriggerEventHandlers({
triggerEvent: TriggerEvent.Hover,
setState: setOpen,
onFocus: e => {
console.log(e);
}, // side effects called on focus of the trigger
});

return (
<>

Button


Content


);
``