<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'});
This Pen doesn't use any external CSS resources.