使用tooltip和插槽实现鼠标移入时展示图片型提示的效果老大让我在一个专有名词后加一个icon，并且在鼠标移入icon

背景

老大给了我一个任务，让我在一个专有名词后加一个小tip的icon，并且在鼠标移入icon时展示对这个专有名词的解释，而且是以图片的形式！！！

当有一个需求的时候，需要先整理思路。

于是，我就把上面这个任务拆分成了三个步骤：

icon的选择和展现 ---- el-icon图标
鼠标移入的交互 ---- el-tooltip
在tooltip中展示图片 ---- 使用插槽自定义content

需求实现

接下来，按照思路一步步的实现。

el-icon图标的使用

借鉴elementUI的官方文档，直接通过设置类名为 el-icon-warning 来使用即可。

<el-radio-group v-model="number">
  <el-radio :label="2">专有名词
      <i class="el-icon-warning" style="color: darkgrey;"></i>
  </el-radio>
</el-radio-group >

实现效果如下图的感叹号。

使用el-tooltip实现鼠标移入显示提示的效果

借鉴elementUI中对tooltip的解释，实现效果代码如下：

<el-radio-group v-model="number">
  <el-radio :label="2">专有名词
      <el-tooltip  content="Right Center 提示文字" effect="light" placement="right">
          <i class="el-icon-warning" style="color: darkgrey;"></i>
      </el-tooltip>
  </el-radio>
</el-radio-group >

实现效果如下：

当然啦，这东西对能看到这篇文章的人当然算是小case啦，接下来就是怎么在tooltip中放图片了。

使用插槽自定义content

还是在上面的代码上修改，实现代码如下。

<el-radio-group v-model="number">
  <el-radio :label="2">专有名词
      <el-tooltip effect="light" placement="right">
          <div slot="content">
              <div>示例图</div>
              <img src="../images/tip.png" >
          </div>
          <i class="el-icon-warning" style="color: darkgrey;"></i>
      </el-tooltip>
  </el-radio>
</el-radio-group >

上面代码的实现重点就在于改变了content的调用方式，slot="content"。
因为多内容展示的tooltip使用slot#content 必须在el-tooltip下加自定义作用的插槽，否则页面（鼠标悬浮上去也没有内容）展示内容为空。

此时，你的tooltip里就会展示你img里面引用的那个图片啦。

举一反三，当需要的提示是任何形式时，都可以使用上述插槽的方式实现，甚至还可以在里面添加跑马灯（el-carousel）。