Tooltip

The default dark tooltip matches Arco Tooltip; light uses the Arco Popover shell. See the Element Plus docs for props.

Hover Tooltip

Hover or focus the button to show a tooltip.

<template>
  <el-tooltip content="Helpful information" placement="top"><el-button>Hover me</el-button></el-tooltip>
  <el-tooltip content="A light tooltip" effect="light"><el-button>Light effect</el-button></el-tooltip>
</template>

Placements

Placement controls which side of the trigger the tooltip appears on.

<script setup lang="ts">
const placements = ['top', 'right', 'bottom', 'left'] as const
</script>

<template>
  <el-tooltip v-for="placement in placements" :key="placement" :placement="placement" :content="placement">
    <el-button>{{ placement }}</el-button>
  </el-tooltip>
</template>

Differences from Arco

• The light effect extends the Popover style while retaining Element Plus configuration.