首先，确保你已经引入了 Element-React 的样式和脚本。可以通过以下方式之一来引入：
1. 使用 CDN：
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 使用 npm 安装：
npm install element-ui
然后在你的 Vue 项目中引入并使用 Tooltip 组件：
<template>
<div>
<!-- 基本的文字提示 -->
<el-tooltip content="这是一个文字提示" placement="top">
<el-button>上方提示</el-button>
</el-tooltip>
<!-- 自定义提示内容 -->
<el-tooltip placement="top">
<div slot="content">自定义的提示内容</div>
<el-button>自定义内容</el-button>
</el-tooltip>
<!-- 使用 v-model 控制提示显示状态 -->
<el-tooltip v-model="showTooltip" content="可通过 v-model 控制显示状态">
<el-button @click="toggleTooltip">Toggle提示</el-button>
</el-tooltip>
</div>
</template>
<script>
import { ElButton, ElTooltip } from 'element-ui';
export default {
data() {
return {
showTooltip: false,
};
},
methods: {
toggleTooltip() {
this.showTooltip = !this.showTooltip;
},
},
components: {
ElButton,
ElTooltip,
},
};
</script>
在上面的例子中，我们使用了 ElTooltip 组件来创建文字提示。通过设置 content 属性来指定提示的内容，通过 placement 属性来设置提示的位置。
可以通过插槽 slot="content" 自定义提示的内容，或者使用 v-model 来控制提示的显示状态。
转载请注明出处：http://www.zyzy.cn/article/detail/5634/Element-React