弹出式窗口的CSS不能动态工作始终在所有位置都有静态位置

Question

我已经在vue.js中实现了一个弹出框。大多数工作部分都是使用CSS和一些javascript完成的。一切正常，但是弹出窗口不是动态的。

在我的代码中，我有条件显示弹出窗口，但是每当我单击弹出窗口的图标时，它就不会动态对齐位置-每次单击时，弹出窗口都会在一个特定位置打开。如果我尝试更改CSS，则不适用于其他图标占位符

        <template>
          <div class="popup" @click="popFunction()" v-if="!Enabled" > 
            <font-awesome-icon :icon="infoIcon"/>
            <span class="popuptext" id="myPopup"> content</span>
          </div>
    /template>

    <script>
        ......
    methods: {
           popFunction() {
           const popup = document.getElementById('myPopup');
           popup.classList.toggle('show');
           },
    },
  </script>

  <style>
                       fa-info-circle {
              margin-top: 5px;
              margin-bottom: -4px;
              font-size: 1.3rem;
              color: $selected-color; 
              cursor: pointer;
            }

    /* Popup container - can be anything you want */
            .popup {
              position: relative;
              display: inline-block;
              cursor: pointer;
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
            }

            /* The actual popup */
            .popup .popuptext {
              visibility: hidden;
              width: 350px;
              background-color: $navbar-default-bg;
              color: $dark-color;
              text-align: left;
              border-radius: 6px;
              padding: 8px 0;
              position: absolute;
              z-index: 1;
              left: -276%;
              margin-left: -80px;
              padding-left: 8px;
              padding-right: 8px;
              bottom: 127%;
              font-size: 10pt;
            }

        /* Popup arrow */
            .popup .popuptext::after {
              content: "";
              position: absolute;
              top: 100%;
              left: 50%;
              margin-left: -40px;
              border-width: 11px;
              border-style: solid;
               border-color: white transparent transparent transparent;
            }

            /* Toggle this class - hide and show the popup */
            .popup .show {
              visibility: visible;
              -webkit-animation: fadeIn 1s;
              animation: fadeIn 1s;
            }

            /* Add animation (fade in the popup) */
            @-webkit-keyframes fadeIn {
              from {opacity: 0;} 
              to {opacity: 1;}
            }

            @keyframes fadeIn {
              from {opacity: 0;}
              to {opacity:1 ;}
            }

            </style>

如果有人对于vue.js的动态弹出窗口有更好的解决方案，那就太好了。

有效的小提琴链接在这里：
尝试添加多个弹出文本并运行它，弹出窗口会显示静态位置。