vue.js - 使用 Vue v-tooltip 如何获取工具提示放置（在工具提示上显示为 x-placement 属性）并基于此设置类

Question

使用 v-tooltip 指令。当工具提示打开时，popper.js 会尝试根据周围空间找到合适的位置（至少我是这样理解的），并将这些信息暴露在 x-placement 属性上。如何在 Vue 中获取放置信息并使用它 - 例如将其公开为 css 类（原因之一是某些浏览器（例如 IE）在 css 属性选择器方面存在性能问题）。

我设法使用 popper.js 自定义修饰符让我的案例工作，但我想知道是否有更多 Vue 方法来做到这一点。

https://jsfiddle.net/xhwL2sme/1/

// see https://popper.js.org/popper-documentation.html#modifiers..applyStyle
let applyStyleModifierWeight = 900;

new Vue({
  el: '#app',
  data: function() {
    return {
      message: 'Hello Vue.js!',
      tooltip: {
        content: "Greetings",
        popperOptions: {
          modifiers: {
            addPlacementClass: {
              order: applyStyleModifierWeight - 1,
              enabled: true,
              fn: data => {
                console.log("addPlacementClass", data);
                data.attributes.class = 'tooltip vue-tooltip-theme ' + data.placement;
                return data;
              }
            }
          }
        }
      }
    }
    }
});

Answer 1

只想将其标记为已回答，以帮助可能遇到相同问题的人。可能的解决方案已包含在问题中。