popover not working when i hover over the code

Neeza 0
Viewed 43

here is my vue js code and i am trying to add a popover to it, using Element ui.

BUT EVERYTIME THE I HOVER OVER IT, IT DOES NOT WORK

<template v-else-if="column.prop == 'Documents'"> 
            <div class="Profile__historical-btn">
              <el-popover 
                ref="popoverRef"
                trigger="hover"
                placement="left"
                width="400" 
              >
                <span>Changes cannot be applied </span>
              </el-popover>
              <span>yes</span>
              <button ref='popoverRef' disabled class="AccProfile__btnDiv" @click="open(row)" v-if="editP">
                <svg-icon icon="edit" width="14px" height="12px"/>
              </button>
            </div>
          </template>

as far as i know the code is exact what i see in the element UI library, but it is not working when i hover it, does it needs any methods/ properties

element-ui vuejs2 vue.js
1 Answers

You have ref in button which is wrong. You should use v-popover directive as stated in docs.

In your case like this:

<button
  v-popover:popoverRef
  disabled class="AccProfile__btnDiv" 
  @click="open(row)"
  v-if="editP"
>
  <svg-icon icon="edit" width="14px" height="12px"/>
</button>

If it still not working then you should check what version you are using.
From version 2.3 element-ui uses different way of referencing popover.

user8SR80
Related