import { CTooltip } from '@coreui/react'// orimport CTooltip from '@coreui/react/src/components/tooltip/CTooltip'| Property | Description | Type | Default |
|---|---|---|---|
| animation 4.9.0+ | Apply a CSS fade transition to the tooltip. | boolean | true |
| className | A string of all className you want applied to the component. | string | - |
| container v4.11.0+ | Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default document.body. | Element | (() => Element) | - |
| content | Content node for your component. | ReactNode | - |
| delay 4.9.0+ | The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: { 'show': 500, 'hide': 100 }. | number | { show: number; hide: number; } | 0 |
| fallbackPlacements 4.9.0+ | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | Placements | Placements[] | ['top', 'right', 'bottom', 'left'] |
| offset | Offset of the tooltip relative to its target. | [number, number] | [0, 6] |
| onHide | Callback fired when the component requests to be hidden. | () => void | - |
| onShow | Callback fired when the component requests to be shown. | () => void | - |
| placement | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | 'auto' | 'top' | 'bottom' | 'right' | 'left' | top |
| trigger | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | 'hover' | 'focus' | 'click' | ['hover', 'focus'] |
| visible | Toggle the visibility of tooltip component. | boolean | - |
On this page