Tooltip

Display prompt information for mouse hover.

Basic usage

Tooltip has 9 placements.

Theme

Tooltip has two built-in themes: dark and light.

TIP

To use customized theme, you will have to known where your tooltip is rendered into, if your tooltip is rendered into the root element, you will need to set the css rule globally.

It is recommended that not using linear gradient background color when you using customized theme and showing the arrow at the same time, because the popup arrow and the content are two different elements, the popup arrow's style needs to be set individually, and when it comes to the gradient background color, it might seem a little bit weird.

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 ElPopper, you can use any attribute that are allowed in ElPopper.

TIP

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.

HTML as content

The content attribute can be set to HTML string.

WARNING

Although content property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. So when raw-content is on, please make sure content is trusted, and never assign user-provided content.

Virtual triggering

Sometimes we want to render the tooltip on some other trigger element, we can separate the trigger and the content.

TIP

Virtual triggering tooltip is controlled component, so that you will have to control the visibility of the tooltip your own when this happens, YOU WILL NOT be able to close the tooltip by clicking somewhere else.

Singleton

Tooltip can also be singleton, which means you can have multiple trigger with only one tooltip instance, this function is implemented based on Virtual triggering

TIP

Known issue: when using singleton, the popup will be bouncing out from unexpected places

Controlled

Tooltip can be controlled by the parent component, by using v-model:visible you can implement two way binding.

Animations

Tooltip can be customized animated, you can set the the desired animation function as you desired.

Attributes

AttributeDescriptionTypeAccepted ValuesDefault
append-towhich element the tooltip CONTENT appends toCSSSelector | HTMLElement#el-popper-container-[randomValue]
effectTooltip theme, built-in theme: dark / lightstringstringdark
contentdisplay content, can be overridden by slot#contentString
raw-contentwhether content is treated as HTML stringbooleanfalse
placementposition of Tooltipstringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottom
visible / v-model:visiblevisibility of Tooltipbooleanfalse
disabledwhether Tooltip is disabledbooleanfalse
offsetoffset of the Tooltipnumber0
transitionanimation namestringel-fade-in-linear
visible-arrow (will deprecate in 2.1.0 )whether an arrow is displayed. For more information, check ElPopper pagebooleantrue
popper-optionspopper.js parametersObjectrefer to popper.js doc{ boundariesElement: 'body', gpuAcceleration: false }
show-afterdelay of appearance, in millisecondnumber0
show-arrowwhether the tooltip content has an arrowbooleantrue / falsetrue
hide-afterdelay of disappear, in millisecondnumber200
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
teleportedwhether tooltip content is teleported, if true it will be teleported to where append-to setsbooleantrue / falsetrue
triggerHow should the tooltip be triggered (to show)stringhover / click / focus / contextmenuhover
virtual-triggeringIndicates whether virtual triggering is enabledbooleanfalse
virtual-refIndicates the reference element to which the tooltip is attachedHTMLElement

Slots

NameDescription
Tooltip triggering & reference element
contentcustomize content

Source

ComponentDocs

Contributors