Display prompt information for mouse hover.
Tooltip has 9 placements.
Tooltip has two built-in themes:
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 is 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.
Display multiple lines of text and set their format.
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
In fact, Tooltip is an extension based on ElPopper, you can use any attribute that are allowed in ElPopper.
router-link component is not supported in tooltip, please use
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.
message 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
dangerouslyUseHTMLString is on, please make sure the content of
message is trusted, and never assign
message to user-provided content.
Sometimes we want to render the tooltip on some other trigger element, we can separate the trigger and the content.
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.
Tooltip can also be singleton, which means you can have multiple trigger with only one tooltip instance, this function is implemented based on
Known issue: when using singleton, the popup will be bouncing out from unexpected places
Tooltip can be controlled by the parent component, by using
v-model you can implement two way binding.
Tooltip can be customized animated, you can set the the desired animation function as you desired.
|append-to-body||whether to append Dialog itself to body. A nested Dialog should have this attribute set to ||boolean||—||true|
|effect||Tooltip theme, built-in theme: ||string||string||dark|
|content||display content, can be overridden by ||String||—||—|
|placement||position of Tooltip||string||top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end||bottom|
|model-value / v-model||visibility of Tooltip||boolean||—||false|
|disabled||whether Tooltip is disabled||boolean||—||false|
|offset||offset of the Tooltip||number||—||0|
|visible-arrow||whether an arrow is displayed. For more information, check ElPopper page||boolean||—||true|
|popper-options||popper.js parameters||Object||refer to popper.js doc|
|show-after||delay of appearance, in millisecond||number||—||0|
|hide-after||delay of disappear, in millisecond||number||—||0|
|auto-close||timeout in milliseconds to hide tooltip||number||—||0|
|manual||whether to control Tooltip manually. ||boolean||—||false|
|popper-class||custom class name for Tooltip's popper||string||—||—|
|enterable||whether the mouse can enter the tooltip||Boolean||—||true|
|tabindex||tabindex of Tooltip||number||—||0|
|trigger||How should the tooltip be triggered (to show)||string||hover / click / focus / contextmenu||hover|
|virtual-triggering||Indicates whether virtual triggering is enabled||boolean||-||false|
|virtual-ref||Indicates the reference element to which the tooltip is attached||HTMLElement||-||-|
|—||Tooltip triggering & reference element|