RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://coreui.io/react/docs/components/tooltip/api/ below:

React Tooltip Component API - CoreUI

animation#4.9.0+ true boolean

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

className# - string

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

container#4.11.0+ document.body Element, DocumentFragment, (() => Element | DocumentFragment)

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# - ReactNode

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

delay#4.9.0+ 0 number, { show: number; hide: number; }

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.

<CTooltip delay={300}>...</CTooltip>
<CTooltip delay={{ show: 500, hide: 100 }}>...</CTooltip>

fallbackPlacements#4.9.0+ ['top', 'right', 'bottom', 'left'] 'top', 'right', 'bottom', 'left', ('top', 'right', 'bottom', 'left')[]

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

offset# [0, 6] [number, number]

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

<CTooltip offset={[0, 10]}>...</CTooltip>
<CTooltip offset={[5, 5]}>...</CTooltip>

onHide# - () => void

Callback fired immediately after the React Tooltip is hidden.

onShow# - () => void

Callback fired immediately after the React Tooltip is shown.

placement# top 'auto', 'top', 'bottom', 'right', 'left'

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.

popperConfig#5.5.0+ - Partial<Options>, ((defaultPopperConfig: Partial<Options>) => Partial<Options>)

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>

trigger# ['hover', 'focus'] 'hover', 'focus', 'click', ('hover' | 'focus' | 'click')[]

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

<CTooltip trigger="hover">...</CTooltip>
<CTooltip trigger={['hover', 'click']}>...</CTooltip>

visible# - boolean

Controls the visibility of the React Tooltip.

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4