Tooltip | Element Plus

Có thể bạn quan tâm

Skip to contentMenu Back to top

Basic usage

Tooltip has 9 placements.

Use attribute content to set the display content when hover. The attribute placement determines the position of the tooltip. Its value is [orientation]-[alignment] with four orientations top, left, right, bottom and three alignments start, end, null, and the default alignment is null. Take placement="left-end" for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.

top-starttoptop-endleft-startright-startleftrightleft-endright-endbottom-startbottombottom-endvue<template> <div class="tooltip-base-box"> <div class="row center"> <el-tooltip class="box-item" effect="dark" content="Top Left prompts info" placement="top-start" > <el-button>top-start</el-button> </el-tooltip> <el-tooltip class="box-item" effect="dark" content="Top Center prompts info" placement="top" > <el-button>top</el-button> </el-tooltip> <el-tooltip class="box-item" effect="dark" content="Top Right prompts info" placement="top-end" > <el-button>top-end</el-button> </el-tooltip> </div> <div class="row"> <el-tooltip class="box-item" effect="dark" content="Left Top prompts info" placement="left-start" > <el-button>left-start</el-button> </el-tooltip> <el-tooltip class="box-item" effect="dark" content="Right Top prompts info" placement="right-start" > <el-button>right-start</el-button> </el-tooltip> </div> <div class="row"> <el-tooltip class="box-item" effect="dark" content="Left Center prompts info" placement="left" > <el-button class="mt-3 mb-3">left</el-button> </el-tooltip> <el-tooltip class="box-item" effect="dark" content="Right Center prompts info" placement="right" > <el-button>right</el-button> </el-tooltip> </div> <div class="row"> <el-tooltip class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end" > <el-button>left-end</el-button> </el-tooltip> <el-tooltip class="box-item" effect="dark" content="Right Bottom prompts info" placement="right-end" > <el-button>right-end</el-button> </el-tooltip> </div> <div class="row center"> <el-tooltip class="box-item" effect="dark" content="Bottom Left prompts info" placement="bottom-start" > <el-button>bottom-start</el-button> </el-tooltip> <el-tooltip class="box-item" effect="dark" content="Bottom Center prompts info" placement="bottom" > <el-button>bottom</el-button> </el-tooltip> <el-tooltip class="box-item" effect="dark" content="Bottom Right prompts info" placement="bottom-end" > <el-button>bottom-end</el-button> </el-tooltip> </div> </div> </template> <style> .tooltip-base-box { width: 600px; } .tooltip-base-box .row { display: flex; align-items: center; justify-content: space-between; } .tooltip-base-box .center { justify-content: center; } .tooltip-base-box .box-item { width: 110px; margin-top: 10px; } </style> Hide source

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.

Set effect to modify theme, and the default value is dark.

DarkLightCustomized themevue<template> <el-tooltip content="Top center" placement="top"> <el-button>Dark</el-button> </el-tooltip> <el-tooltip content="Bottom center" placement="bottom" effect="light"> <el-button>Light</el-button> </el-tooltip> <el-tooltip content="Bottom center" effect="customized"> <el-button>Customized theme</el-button> </el-tooltip> </template> <style> .el-popper.is-customized { /* Set padding to ensure the height is 32px */ padding: 6px 12px; background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)); } .el-popper.is-customized .el-popper__arrow::before { background: linear-gradient(45deg, #b2e68d, #bce689); right: 0; } </style> Hide source

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.

click to close tooltip function vue<template> <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light" > <el-button @click="disabled = !disabled"> click to {{ disabled ? 'active' : 'close' }} tooltip function </el-button> </el-tooltip> </template> <script lang="ts" setup> import { ref } from 'vue' const disabled = ref(false) </script> Hide source

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.

hover mevue<template> <el-tooltip content="<span>The content can be <strong>HTML</strong></span>" raw-content > <el-button>hover me</el-button> </el-tooltip> </template> Hide source

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.

testvue<template> <el-tooltip v-model:visible="visible" content="Bottom center" placement="bottom" effect="light" trigger="click" virtual-triggering :virtual-ref="triggerRef" /> <el-button @click="visible = !visible">test</el-button> </template> <script setup lang="ts"> import { onMounted, onUnmounted, ref } from 'vue' const visible = ref(false) const position = ref({ top: 0, left: 0, bottom: 0, right: 0, } as DOMRect) const triggerRef = ref({ getBoundingClientRect: () => position.value, }) const mousemoveHandler = ({ clientX, clientY }: MouseEvent) => { position.value = DOMRect.fromRect({ x: clientX, y: clientY, }) } onMounted(() => { document.addEventListener('mousemove', mousemoveHandler) }) onUnmounted(() => { document.removeEventListener('mousemove', mousemoveHandler) }) </script> Hide source

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

Click to open tooltipClick to open tooltipClick to open tooltipvue<template> <div> <el-button v-for="i in 3" :key="i" @mouseover="(e) => (buttonRef = e.currentTarget)" @click="visible = !visible" >Click to open tooltip</el-button > </div> <el-tooltip ref="tooltipRef" :visible="visible" :popper-options="{ modifiers: [ { name: 'computeStyles', options: { adaptive: false, enabled: false, }, }, ], }" :virtual-ref="buttonRef" virtual-triggering popper-class="singleton-tooltip" > <template #content> <span> Some content </span> </template> </el-tooltip> </template> <script setup lang="ts"> import { ref } from 'vue' const buttonRef = ref() const tooltipRef = ref() const visible = ref(false) </script> <style> .singleton-tooltip { transition: transform 0.3s var(--el-transition-function-fast-bezier); } </style> Hide source

Controlled

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

Hover me vue<template> <el-tooltip :visible="visible"> <template #content> <span>Content</span> </template> <el-button @mouseenter="visible = true" @mouseleave="visible = false"> Hover me </el-button> </el-tooltip> </template> <script setup lang="ts"> import { ref } from 'vue' const visible = ref(false) </script> Hide source

Animations

Tooltip can be customized animated, you can set the desired animation use transition.

TIP

Transition Classes, more information can be found at Vue Transition.

trigger mevue<template> <el-tooltip content="I am an el-tooltip" transition="slide-fade"> <el-button>trigger me</el-button> </el-tooltip> </template> <script lang="ts" setup></script> <style> .slide-fade-enter-active { transition: all 0.3s ease-out; } .slide-fade-leave-active { transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter-from, .slide-fade-leave-to { transform: translateX(120px); opacity: 0; } </style> Hide source

Use the append-to

You must wait for the DOM to be mounted before using targetElement.

Click to open tooltipvue<template> <el-tooltip :append-to="targetElement" trigger="click" content="Append to .target" placement="top" > <el-button class="target">Click to open tooltip</el-button> </el-tooltip> </template> <script lang="ts" setup> import { onMounted, ref } from 'vue' const targetElement = ref('') onMounted(() => { targetElement.value = '.target' }) </script> <style scoped> .target { position: relative; margin-top: 20px; } </style> Hide source

API

Attributes

Name	Description	Type	Default
append-to	which element the tooltip CONTENT appends to	CSSSelector / HTMLElement	—
effect	Tooltip theme, built-in theme: dark / light	enum	dark
content	display content, can be overridden by slot#content	string	''
raw-content	whether content is treated as HTML string	boolean	false
placement	position of Tooltip	enum	bottom
fallback-placements	list of possible positions for Tooltip popper.js	array	—
visible / v-model:visible	visibility of Tooltip	boolean	—
disabled	whether Tooltip is disabled	boolean	—
offset	offset of the Tooltip	number	12
transition	animation name	string	—
popper-options	popper.js parameters	objectrefer to popper.js doc	{}
arrow-offset 2.9.10	Controls the offset (padding) of the tooltip’s arrow relative to the popper.	number	5
show-after	delay of appearance, in millisecond, not valid in controlled mode	number	0
show-arrow	whether the tooltip content has an arrow	boolean	true
hide-after	delay of disappear, in millisecond, not valid in controlled mode	number	200
auto-close	timeout in milliseconds to hide tooltip, not valid in controlled mode	number	0
popper-class	custom class name for Tooltip's popper	string	—
popper-style	custom style for Tooltip's popper	string / object	—
enterable	whether the mouse can enter the tooltip	boolean	true
teleported	whether tooltip content is teleported, if true it will be teleported to where append-to sets	boolean	true
trigger	How should the tooltip be triggered (to show), not valid in controlled mode	enum / array	hover
virtual-triggering	Indicates whether virtual triggering is enabled	boolean	—
virtual-ref	Indicates the reference element to which the tooltip is attached	HTMLElement	—
trigger-keys	When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard, not valid in controlled mode	Array	['Enter','Space']
persistent	when tooltip inactive and persistent is false , tooltip will be destroyed	boolean	—
aria-label a11y	same as aria-label	string	—
focus-on-target 2.11.2	when triggering tooltips through hover, whether to focus the trigger element, which improves accessibility	boolean	false

Events

Name	Description	Type
before-show	Triggers before tooltip is shown. Passes trigger reason as argument.	Function
show	Triggers when tooltip is shown. Passes trigger reason as argument.	Function
before-hide	Triggers before tooltip is hidden. Passes trigger reason as argument.	Function
hide	Triggers when tooltip is hidden. Passes trigger reason as argument.	Function

Slots

Name	Description
default	Tooltip triggering & reference element, only a single root element is accepted
content	customize content

Exposes

Name	Description	Type
popperRef	el-popper component instance	object
contentRef	el-tooltip-content component instance	object
isFocusInsideContent	validate current focus event is trigger inside el-tooltip-content	Function
updatePopper	update el-popper component instance	Function
onOpen	expose onOpen function to mange el-tooltip open state	Function
onClose	expose onClose function to mange el-tooltip open state	Function
hide	expose hide function	Function

FAQ

Typical issue: #20907

vue<template> <el-tooltip content="tooltip content" placement="top" :trigger-keys="[]"> <el-input v-model="value" placeholder="" /> </el-tooltip> </template>

Source

Component • Style • Docs

Contributors

PopoverDivider

Basic usageThemeMore ContentAdvanced usageHTML as contentVirtual triggeringSingletonControlledAnimationsUse the append-toAPIAttributesEventsSlotsExposesFAQHow to allow spaces in the input box when tooltip is nested?SourceContributors