Inline Definitions allow tooltips to display additional information on inline content.

Inline Definition

Determines the alignment of the popover content relative to the trigger element

default: `bottom`

align

enum

Allows consuming applications to override font-size as set by the LeafyGreen Provider.

baseFontSize

Trigger element for the definition tooltip

children

Class name applied to popover content container.

className

string

Whether the `Tooltip` will appear in dark mode.

darkMode

definition

Enables Tooltip to trigger based on the event specified by `triggerEvent`.

enabled

Determines the justification of the popover content relative to the trigger element

default: `start`

justify

Click event handler passed to the root div element within the portal container.

onClick

MouseEventHandler<Element>

Callback that is called when the tooltip is closed internally. E.g. on ESC press, on backdrop click, on blur.

onClose

() => void

Controls component and determines the open state of the `Tooltip`

open

Number that controls the z-index of the popover element directly.

popoverZIndex

number

When usePortal is `true`, specifies a class name to apply to the root element of the portal.

portalClassName

When usePortal is `true`, specifies an element to portal within. The default behavior is to generate a div at the end of the document to render within.

portalContainer

HTMLElement

A reference to the element against which the popover component will be positioned.

refEl

RefObject<HTMLElement>

When usePortal is `true`, specifies the scrollable element to position relative to.

scrollContainer

Callback to change the open state of the `Tooltip`.

setOpen

Dispatch<SetStateAction<boolean>>

Callback to determine whether or not `Tooltip` should close when user tries to close it.

shouldClose

() => boolean

Specifies the amount of spacing (in pixels) between the trigger element and the Popover content.

default: `10`

spacing

`className` prop passed to the Tooltip component instance

tooltipClassName

A slot for the element used to trigger the `Tooltip`.

trigger

Determines if a `hover` or `click` event will trigger the opening of a `Tooltip`.

triggerEvent

Specifies that the popover content should be rendered at the end of the DOM,
rather than in the DOM tree.

default: `true`