Components
Overlay
Tooltip

Tooltip

Tooltip

Editable Example

import { Tooltip } from "@wfp/react";

() => {
  return (
    <Tooltip content="Label text">
      This is a helper text
    </Tooltip>
  );
};
PropDefaultDescriptionValue

children

ReactNode
–

React nodes that trigger the tooltip on interaction.

content

ReactNode |((options: { setVisibility: Dispatch<SetStateAction<boolean>>; visibilityChange: (state: boolean) => void; }) => ReactNode)
–

Content of the tooltip. Can be a React node or a function returning a React node. The function receives an object with functions to set visibility and handle visibility change.

dark

boolean
–

If true, applies a dark theme to the tooltip.

noPadding

boolean
–

If true, removes padding from the tooltip.

placement

Placement
top

Position of the tooltip relative to the child element. Uses the Placement type from utils.

default: top

trigger

"hover" |"click"
hover

Trigger action for the tooltip - can be "hover" or "click".

default: hover

modifiers

[]
–

Popper.js modifiers for advanced tooltip positioning.

usePortal

boolean
–

If true, renders the tooltip in a React portal.

createRefWrapper

boolean
–

If true, wraps the child element with a span to attach a ref for the tooltip.

interactive

boolean
–

If true, the tooltip is interactive (hoverable/clickable).

delayHide

number
–

Delay in milliseconds before hiding the tooltip.

className

string
–

Additional custom class names for styling the tooltip.

closeOnOutsideClick

boolean
–

If true, closes the tooltip when clicking outside of it.

closeOnTriggerHidden

boolean
–

Close the tooltip when the trigger element is hidden.

defaultVisible

boolean
–

If the tooltip should be visible by default.

delayShow

number
–

Delay in milliseconds before showing the tooltip.

followCursor

boolean
–

If true, the tooltip follows the cursor.

mutationObserverOptions

MutationObserverInit
–

Options for observing DOM changes through a MutationObserver.

offset

[number,number]
–

Offset of the tooltip from the trigger element, specified as a tuple [x, y].

onVisibleChange

(state: boolean) => void
–

Callback function when the visibility state of the tooltip changes.

On this page

References