(vue)el-popover鼠标移入提示效果

(vue)el-popover鼠标移入提示效果


效果:
在这里插入图片描述


代码:

<el-form-item
  v-for="(item,index) of ele.algorithmParameters"
  :key="index"
  :label="item.parametersName"
  class="descInput"
>
  <el-input v-model="item.parametersValue" placeholder="请输入" @change="paramsChange" />  
  <!-- 重点开始 -->
  <span class="descIcon">
    <el-popover placement="right" trigger="hover">
      <i slot="reference" class="el-icon-question"></i>//slot="reference"
      <span>{{ item.itemDescription }}</span>//浮现的内容
    </el-popover>
  </span>
<!-- 重点结束 -->
</el-form-item>


//样式
<style lang="scss" scoped>
// 参数描述
.descInput {
  position: relative;
}
.descIcon {
  position: absolute;
  top: 0px;
  right: -25px;
  margin-right: 10px;
}
</style>

你可能感兴趣的:(VUE,vue.js,javascript,前端)