Skip to content

ToolTip NEW

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

Basic

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.

Theme

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

Set type to modify theme, the default is Dark.

Trigger

By setting trigger, you can specify different trigger methods.

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

Position

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

NameTypeDefaultDescription
popup-visible / v-modelbooleanundefinedWhether the ToolTip is visible.
default-popup-visiblebooleanfalseWhether the ToolTip is visible by default (uncontrolled mode).
contentstringundefinedContent.
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

NameParametersDescription
content()Custom ToolTip content.

Tooltip Methods

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

MIT Licensed