React Tooltip Component API

Enables or disables the CSS fade transition for the React Tooltip.

Adds a custom class name to the React Tooltip container. Useful for overriding default styles or applying additional design choices.

Appends the React Tooltip to a specific element instead of the default document.body. You may pass:

• A DOM element (HTMLElement or DocumentFragment)
• A function that returns a single element
• null

<CTooltip container={document.getElementById('my-container')}>...</CTooltip>

Content to be displayed within the React Tooltip. Can be a string or any valid React node.

The delay (in milliseconds) before showing or hiding the React Tooltip.

• If provided as a number, the delay is applied to both "show" and "hide".
• If provided as an object, it should have distinct "show" and "hide" values.

// Delays 300ms on both show and hide
<CTooltip delay={300}>...</CTooltip>

// Delays 500ms on show and 100ms on hide
<CTooltip delay={{ show: 500, hide: 100 }}>...</CTooltip>

Array of fallback placements for the React Tooltip to use when the preferred placement cannot be achieved. These placements are tried in order.

Adjusts the offset of the React Tooltip relative to its target. Expects a tuple [x-axis, y-axis].

// Offset the menu 0px in X and 10px in Y direction
<CTooltip offset={[0, 10]}>...</CTooltip>

// Offset the menu 5px in both X and Y direction
<CTooltip offset={[5, 5]}>...</CTooltip>

Callback fired immediately after the React Tooltip is hidden.

Callback fired immediately after the React Tooltip is shown.

Initial placement of the React Tooltip. Note that Popper.js modifiers may alter this placement automatically if there's insufficient space in the chosen position.

Customize the Popper.js configuration used to position the React Tooltip. Pass either an object or a function returning a modified config. Learn more

<CTooltip
  popperConfig={(defaultConfig) => ({
    ...defaultConfig,
    strategy: 'fixed',
    modifiers: [
      ...defaultConfig.modifiers,
      { name: 'computeStyles', options: { adaptive: false } },
    ],
  })}
>...</CTooltip>

Determines the events that toggle the visibility of the React Tooltip. Can be a single trigger or an array of triggers.

// Hover-only tooltip
<CTooltip trigger="hover">...</CTooltip>

// Hover + click combined
<CTooltip trigger={['hover', 'click']}>...</CTooltip>

Controls the visibility of the React Tooltip.

• true to show the tooltip.
• false to hide the tooltip.