vue2使用elementUI组件el-tooltip指定元素进行提示信息（图标显示信息）

 

          <el-table-column prop="operation" label="操作" border width="200px">
            <template slot-scope="scope">
              <div class="operation-icons">
                <!-- 查看按钮 -->
                <el-tooltip content="查看" placement="bottom">
                  <el-button type="text"
                    @click="handleView(scope.row)"
                    icon="el-icon-search"></el-button>
                </el-tooltip>
                <!-- 删除按钮 -->
                <el-tooltip content="删除" placement="bottom">
                  <el-button type="text"
                    @click="handleDelete(scope.row)"
                    icon="el-icon-delete"></el-button>
                </el-tooltip>
                <!-- 下载按钮 -->
                <el-tooltip content="下载" placement="bottom">
                  <el-button
                    type="text"
                    @click="handleDownload(scope.row)"
                    icon="el-icon-download"></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>

 

<el-tooltip>标签：在鼠标悬停在指定元素上时显示一段文字，提供额外的信息或解释。

<el-tooltip></el-tooltip>

 

content属性：用来设置工具提示的文本内容的属性。

<el-tooltip content="删除"></el-tooltip>

 

placement属性：用于设置工具提示的显示位置。

<el-tooltip  placement="bottom"></el-tooltip>

• top：工具提示显示在目标元素上方。
• bottom：工具提示显示在目标元素下方。
• left：工具提示显示在目标元素左侧。
• right：工具提示显示在目标元素右侧。