Using Vue v-tooltip How to get tooltip placement (which is exposed as x-placement attribute on tooltip) and set class based on this

Question

Using v-tooltip directive. When tooltip is opened popper.js tries to find suitable placement based on surrounding space (at least that is how I understand it) and has this information exposed on x-placement attribute. How to get the placement information and use this in Vue - for example to expose it as css class (one reason is that some browsers (IE for example) have performance problem with css attribute selectors).

I managed to get my case working using popper.js custom modifiers but I wonder if there is a more Vue way to do it.

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

Just want to mark it as answered to help people who might have the same problem. Possible solution is already included in question.