Vue Tooltip Component API

Tooltip API

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

On this page

CTooltip

jsx
import { CTooltip } from '@coreui/vue-pro'

Props

PropertyDefaultType
animation4.9.0+trueboolean

Apply a CSS fade transition to the tooltip.

container5.0.0+'body'HTMLElement, (() => HTMLElement), string

Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default document.body.

content-string

Content for your component. If you want to pass non-string value please use dedicated slot <template #content>...</template>

delay4.9.0+0number, { show: number; hide: number }

The delay for displaying and hiding the popover (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 }.

fallbackPlacements4.9.0+() => ['top', 'right', 'bottom', 'left']Placements, Placements[]

Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.

offset[0, 6]array

Offset of the tooltip relative to its target.

placement'top'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.

popperConfig5.10.0+undefinedPartial<Options>, ((defaultPopperConfig: Partial<Options>) => Partial<Options>)

A Popper.js configuration object, or a function that receives the default configuration and returns a modified one, used to customize the positioning of the tooltip.

trigger() => ['hover', 'focus']Triggers, Triggers[]

Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.

visible-boolean

Toggle the visibility of tooltip component.

Events

Event name
hide

Callback fired when the component requests to be hidden.

show

Callback fired when the component requests to be shown.