<div id="app">
  <button content="Как закрыть элемент по нажатию на крестик внутри tooltip?" 
       v-tippy='{interactive : true, trigger : "click"}'>
    Клик
  </button>
</div>

.close:after {
  position: absolute;
  font-size: 20px;
  cursor: pointer;
  top: 0;
  right: 0;
  content:'×';
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  overflow: hidden;
  text-align: center;
  vertical-align: top;
}
VueTippy.tippy.setDefaults({
  onShow(instance) {
    const elements = instance.popperChildren;
    if(elements.close) return;
    const tooltip = elements.tooltip;
    tooltip.style = 'padding-right: 20px';
    const close = document.createElement('div');
    close.className = 'close';
    close.onclick = function() {
      instance.hide();
    }
    elements.close = elements.tooltip.appendChild(close);
    console.log(instance, 444)
  }
})

new Vue({el : '#app'});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js
  2. https://cdn.jsdelivr.net/npm/vue-tippy/dist/vue-tippy.min.js