React
Is new design vision part implemented using new tokens?
Up to date
Resources
Storybook
import { Button, Tooltip } from '@optimus-web/core';
const TooltipedButton = Tooltip(Button);
<TooltipButton tooltip="This is a tooltip">
Click me
</TooltipButton>
API
|
Name |
Description |
Type |
Default |
|---|---|---|---|
|
tooltip? |
Defines the tooltip content |
ReactNode |
undefined |
|
tooltipDelay |
Defines the delay before the tooltip appears |
number |
0 |
|
tooltipHideOnClick |
Enables the tooltip to hide on click on the element |
boolean |
true |
|
tooltipShowOnClick |
Enables the tooltip to shop on click on the element |
boolean |
false |
|
tooltipPosition? |
Defines where the tooltip should appear related to the element |
PositionStrict |
undefined |
|
anchorElementOverride? |
Defines an override on the element anchor |
ElementOrElementGetter |
undefined |
|
onClick? |
Defines what should happen on tooltip click |
(e: MouseEvent<HTMLElement>) => void |
undefined |
|
onMouseEnter? |
Defines what should happen when the mouse enters the tooltip area |
(e: MouseEvent<HTMLElement>) => void |
undefined |
|
onMouseLeave? |
Defines what should happen when the mouse exits the tooltip area |
(e: MouseEvent<HTMLElement>) => void |
undefined |
|
maxWidth? |
Define the max width of the tooltip |
number |
undefined |
|
offset? |
Defined the offset between the tooltip and the element |
number |
undefined |
|
openOnMount? |
Enables the tooltip to be open on mount |
boolean |
false |
|
inline? |
Enables the tooltip to be in line |
boolean |
undefined |
|
tooltipRef? |
Defines the ref for the tooltip |
Ref<Positioner> |
undefined |
|
inPortal? |
Enables the tooltip to be part of portal |
boolean |
undefined |
|
positioningStrategy? |
Defines the positioning strategy for the tooltip |
PositioningStrategy |
undefined |
|
children? |
Defines the children of the component |
ReactNode |
undefined |