Skip to content

ToolTip NEW

Tooltip can be used to show a message when hovering over an element.


Move the mouse in or click to pop up bubbles, which can operate on the elements on the floating layer, and carry complex content and operations.


Tooltip has two built-in themes: Dark and Light.

Set type to modify theme, the default is Dark.


By setting trigger, you can specify different trigger methods.

They are: hover | click | focus | context-menu.


Tooltip supports 12 different positions. They are: top left right bottom top-left top-right bottom-left bottom-right left-top left-bottom right-top right-bottom.

Custom Background Color

Customize the background color through the background-color property.

Tooltip Props

popup-visible / v-modelbooleanundefinedWhether the ToolTip is visible.
default-popup-visiblebooleanfalseWhether the ToolTip is visible by default (uncontrolled mode).
type'Dark' | 'Light''Dark'ToolTip type.
trigger'hover' | 'click' | 'focus' | 'contextMenu''hover''hover'
position'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom''top'ToolTip position.
background-colorstringundefinedThe backgroundColor of the ToolTip content.
content-classstringundefinedThe class name of the ToolTip content.
content-styleCSSPropertiesundefinedThe style of the ToolTip content.
arrow-classstringundefinedThe class name of the ToolTip arrow.
arrow-styleCSSPropertiesundefinedThe style of the ToolTip arrow.
popup-containerstring | HTMLElement | undefinedundefinedMount container for ToolTip box.
update-at-scrollboolean falseWhether to update the position of the popup when the container is scrolled.

Tooltip Slots

content()Custom ToolTip content.

Tooltip Methods

popup-visible-change(visible: boolean) => voidTriggered when the text bubble display status changes.

MIT Licensed