Tooltip V2 ​

<template>
  <el-tooltip-v2 aria-label="content" placement="left">
    <template #trigger>
      <el-button circle>
        <el-icon><Plus /></el-icon>
      </el-button>
    </template>
    Basic tooltip
  </el-tooltip-v2>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
</script>

<template>
  <el-tooltip-v2 :aria-label="title">
    <template #trigger>
      <el-button>
        <el-icon><Delete /></el-icon>
      </el-button>
    </template>
    {{ content }}
  </el-tooltip-v2>
</template>

<script setup lang="ts">
import { Delete } from '@element-plus/icons-vue'

const content = 'Delete'
const title = 'Delete item'
</script>

<template>
  <!-- eslint-disable vue/require-toggle-inside-transition  -->
  <el-tooltip-v2 aria-label="content" placement="top" content-class="scale-in">
    <template #trigger>
      <el-button circle>
        <el-icon><Plus /></el-icon>
      </el-button>
    </template>
    <div>content</div>
  </el-tooltip-v2>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
</script>

<style>
@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.el-tooltip-v2__content.scale-in {
  animation: scale-in var(--el-transition-duration) ease-out forwards;
}
</style>

<template>
  <el-tooltip-v2 full-transition :transition-props="transitionProps">
    <template #trigger>
      <el-button circle>
        <el-icon><Plus /></el-icon>
      </el-button>
    </template>
    <div>content</div>
  </el-tooltip-v2>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'

const transitionProps = {
  name: 'el-fade-in-linear',
}
</script>

<template>
  <el-tooltip-v2 aria-label="content" teleported to="body">
    <template #trigger>
      <el-button>hover me</el-button>
    </template>
    <div>I am attached to document.body</div>
  </el-tooltip-v2>
</template>

<template>
  <el-tooltip-v2 aria-label="content" show-arrow always-on placement="top">
    <template #trigger>
      <el-button circle>
        <el-icon><Plus /></el-icon>
      </el-button>
    </template>
    Basic tooltip
  </el-tooltip-v2>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
</script>