element-plus/assets/en-US_component_tooltip-v2.md.ad0210d1.lean.js

import{_ as C,a as c,b as i,c as u,d as F,e as D}from"./chunks/transition.d56f810d.js";import{_ as k}from"./chunks/contributors.aa2d3a90.js";import{c as r,a as s,w as e,u as o,b as n,d as a,e as E,r as g,o as A}from"./app.a8b139f6.js";const m=n("h1",{id:"tooltip-v2",tabindex:"-1"},[a("Tooltip V2 "),n("a",{class:"header-anchor",href:"#tooltip-v2","aria-hidden":"true"},"#")],-1),d=n("p",null,"For the existing tooltip, it has too many APIs which is not very intuitive and accessible, so we created this much simpler tooltip, which does only one simple thing - showing tooltip. The structure of having a tooltip is kind of the same, but the API is different. In this version we have provided the components individually, you can compose your own tooltip by using the components.",-1),h=n("h2",{id:"basic-usage",tabindex:"-1"},[a("Basic usage "),n("a",{class:"header-anchor",href:"#basic-usage","aria-hidden":"true"},"#")],-1),v=n("p",null,[n("strong",null,"Hover"),a(" or "),n("strong",null,"tab"),a(" on the icon to see the tooltip.")],-1),B=n("p",null,"tooltip-v2/basic-usage",-1),_=n("h2",{id:"accessible-tooltip",tabindex:"-1"},[a("Accessible tooltip "),n("a",{class:"header-anchor",href:"#accessible-tooltip","aria-hidden":"true"},"#")],-1),b=n("p",null,"tooltip-v2/a11y",-1),f=E("",3),w=n("p",null,"tooltip-v2/transition",-1),y=n("h3",{id:"full-transition",tabindex:"-1"},[a("Full transition "),n("a",{class:"header-anchor",href:"#full-transition","aria-hidden":"true"},"#")],-1),P=n("p",null,[a("Of course, you can have full transition for your tooltip content. But this requires using "),n("a",{href:"https://vuejs.org/guide/built-ins/transition.html#transition",target:"_blank",rel:"noopener noreferrer"},"Transition"),a(" component, checkout the demo below.")],-1),T=n("p",null,"tooltip-v2/full-transition",-1),x=n("h2",{id:"render-to-the-root-element",tabindex:"-1"},[a("Render to the root element "),n("a",{class:"header-anchor",href:"#render-to-the-root-element","aria-hidden":"true"},"#")],-1),q=n("p",null,[a("By default, unlike "),n("a",{href:"./tooltip.html"},"tooltip v1"),a(", the tooltip will be rendered to the body element. "),n("strong",null,"tooltip v2"),a(" will render to where the trigger/reference element is. But you can still render to to the root element by using "),n("code",null,"Teleport"),a(" component.")],-1),S=n("p",null,"tooltip-v2/render-to-root",-1),V=n("h2",{id:"with-arrow",tabindex:"-1"},[a("With arrow "),n("a",{class:"header-anchor",href:"#with-arrow","aria-hidden":"true"},"#")],-1),I=n("p",null,"tooltip-v2/arrow",-1),j=E("",3),L='{"title":"Tooltip V2","description":"","frontmatter":{"title":"Tooltip V2","lang":"en-US"},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage"},{"level":2,"title":"Accessible tooltip","slug":"accessible-tooltip"},{"level":2,"title":"Transition / Animation","slug":"transition-animation"},{"level":3,"title":"Full transition","slug":"full-transition"},{"level":2,"title":"Render to the root element","slug":"render-to-the-root-element"},{"level":2,"title":"With arrow","slug":"with-arrow"},{"level":2,"title":"Source","slug":"source"},{"level":2,"title":"Contributors","slug":"contributors"}],"relativePath":"en-US/component/tooltip-v2.md","lastUpdated":1652067752000}',N={},M=Object.assign(N,{setup(O){const t={"../../examples/tooltip-v2/a11y.vue":C,"../../examples/tooltip-v2/arrow.vue":c,"../../examples/tooltip-v2/basic-usage.vue":i,"../../examples/tooltip-v2/full-transition.vue":u,"../../examples/tooltip-v2/render-to-root.vue":F,"../../examples/tooltip-v2/transition.vue":D};return(R,U)=>{const p=g("Demo"),l=k;return A(),r("div",null,[m,d,h,v,s(p,{demos:o(t),source:"%3Cpre%20v-pre%3E%3Ccode%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Etemplate%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%20%20%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Eel-tooltip-