El Tooltip

Element Plus Tooltip Component

Display prompt information for mouse hover.

When to Invoke

Invoke this skill when:

• User needs to show tooltip on hover
• User wants to display hints or tips
• User needs to position tooltip in different directions
• User wants to customize tooltip content
• User asks about tooltip with HTML content

Features

• 9 Placements: top, bottom, left, right with alignment options
• Two Themes: dark and light
• HTML Content: Support for HTML strings
• VNode Content: Render Vue components as content
• Virtual Triggering: Separate trigger and content elements
• Controlled Mode: Control visibility programmatically
• Custom Animation: Customizable transitions

API Reference

Attributes

Events

Slots

Exposes

Usage Examples

Basic Usage

<template>
  <el-tooltip content="Top center" placement="top">
    <el-button>Top</el-button>
  </el-tooltip>
  
  <el-tooltip content="Bottom center" placement="bottom">
    <el-button>Bottom</el-button>
  </el-tooltip>
</template>

Theme

<template>
  <el-tooltip content="Dark theme" effect="dark">
    <el-button>Dark</el-button>
  </el-tooltip>
  
  <el-tooltip content="Light theme" effect="light">
    <el-button>Light</el-button>
  </el-tooltip>
</template>

Rich Content

<template>
  <el-tooltip placement="top">
    <template #content>
      <div>Multiple lines</div>
      <div>Second line</div>
      <div>Third line</div>
    </template>
    <el-button>Rich Content</el-button>
  </el-tooltip>
</template>

HTML Content

<template>
  <el-tooltip
    raw-content
    content="<strong>Bold</strong> and <i>italic</i>"
  >
    <el-button>HTML Content</el-button>
  </el-tooltip>
</template>

Advanced Usage

<template>
  <el-tooltip
    :disabled="disabled"
    :hide-after="0"
    placement="bottom"
  >
    <template #content>
      <span>Custom content</span>
    </template>
    <el-button>Advanced</el-button>
  </el-tooltip>
</template>

<script setup>
import { ref } from 'vue'

const disabled = ref(false)
</script>

Virtual Triggering

<template>
  <el-button ref="triggerRef">Trigger</el-button>
  
  <el-tooltip
    virtual-triggering
    :virtual-ref="triggerRef"
    content="Virtual tooltip"
  />
</template>

<script setup>
import { ref } from 'vue'

const triggerRef = ref()
</script>

Controlled Visibility

<template>
  <el-tooltip
    v-model:visible="visible"
    content="Controlled tooltip"
  >
    <el-button @click="visible = !visible">
      Toggle Tooltip
    </el-button>
  </el-tooltip>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

Custom Animation

<template>
  <el-tooltip
    content="Custom animation"
    transition="el-zoom-in-top"
  >
    <el-button>Custom Animation</el-button>
  </el-tooltip>
</template>

Click Trigger

<template>
  <el-tooltip
    content="Click to show"
    trigger="click"
  >
    <el-button>Click Trigger</el-button>
  </el-tooltip>
</template>

With Form Elements

<template>
  <!-- Wrap disabled elements in a container -->
  <el-tooltip content="This field is disabled">
    <div>
      <el-input disabled placeholder="Disabled input" />
    </div>
  </el-tooltip>
</template>

Common Issues

1. Tooltip Not Showing on Disabled Elements

Wrap disabled elements in a container:

<el-tooltip content="Tooltip">
  <div>
    <el-button disabled>Disabled Button</el-button>
  </div>
</el-tooltip>

2. Router-link Not Working in Tooltip

Use vm.$router.push instead:

<el-tooltip>
  <template #content>
    <span @click="$router.push('/path')">Link</span>
  </template>
</el-tooltip>

3. Space Key Not Working in Nested Input

Set trigger-keys to empty array:

<el-tooltip :trigger-keys="[]">
  <el-input v-model="value" />
</el-tooltip>

Best Practices

1. Keep content short: Tooltips should be concise
2. Use appropriate placement: Position tooltip near the trigger
3. Avoid HTML content: Prefer VNode for security
4. Disabled element handling: Wrap disabled elements in a container
5. Controlled mode: Use v-model:visible for programmatic control