Display prompt information for mouse hover.

Basic usage

Tooltip has 9 placements.


Tooltip has two themes: dark and light

More Content

Display multiple lines of text and set their format.

Advanced usage

In addition to basic usages, there are some attributes that allow you to customize your own:

transition attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.

disabled attribute allows you to disable tooltip. You just need set it to true.

In fact, Tooltip is an extension based on Vue-popper, you can use any attribute that are allowed in Vue-popper.


The router-link component is not supported in tooltip, please use vm.$router.push.

Disabled form elements are not supported for Tooltip, more information can be found at MDN. You need to wrap the disabled form element with a container element for Tooltip to work.


AttributeDescriptionTypeAccepted ValuesDefault
append-to-bodywhether to append Dialog itself to body. A nested Dialog should have this attribute set to truebooleantrue
effectTooltip themestringdark/lightdark
contentdisplay content, can be overridden by slot#contentString
placementposition of Tooltipstringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottom
model-value / v-modelvisibility of Tooltipbooleanfalse
disabledwhether Tooltip is disabledbooleanfalse
offsetoffset of the Tooltipnumber0
transitionanimation namestringel-fade-in-linear
visible-arrowwhether an arrow is displayed. For more information, check Vue-popper pagebooleantrue
popper-optionspopper.js parametersObjectrefer to popper.js doc{ boundariesElement: 'body', gpuAcceleration: false }
show-afterdelay of appearance, in millisecondnumber0
hide-afterdelay of disappear, in millisecondnumber0
auto-closetimeout in milliseconds to hide tooltipnumber0
manualwhether to control Tooltip manually. mouseenter and mouseleave won't have effects if set to truebooleanfalse
popper-classcustom class name for Tooltip's popperstring
enterablewhether the mouse can enter the tooltipBooleantrue
tabindextabindex of Tooltipnumber0


customize default content