React Tooltip Component API

Tooltip API

New Year sale. Skyrocket your business in 2025!

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.

Get offer!

Explore the API reference for the React Tooltip component and discover how to effectively utilize its props for customization.

On this page

CTooltip#

import { CTooltip } from '@coreui/react'
// or
import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'

Property	Default	Type
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. // 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>
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]`. // 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>
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. // Hover-only tooltip <CTooltip trigger="hover">...</CTooltip> // Hover + click combined <CTooltip trigger={['hover', 'click']}>...</CTooltip>
visible#	-	`boolean`
Controls the visibility of the React Tooltip. `true` to show the tooltip. `false` to hide the tooltip.