Sha256: d52944b6b6fa49b6461452cb36edbec37c9c40686bd01b34b6c682c7f5ad8414
Contents?: true
Size: 1.55 KB
Versions: 4
Compression:
Stored size: 1.55 KB
Contents
import { Controller } from '@hotwired/stimulus';
import { createPopper } from '@popperjs/core';
export default class TooltipComponent extends Controller {
// Create a new Popper instance
connect() {
this.popperInstance = createPopper(this.triggerTarget, this.tooltipTarget, {
placement: this.placementValue,
modifiers: [
{
name: 'offset',
options: {
offset: this.offsetValue
}
}
]
});
}
// Destroy the Popper instance
disconnect() {
if (this.popperInstance) {
this.popperInstance.destroy();
}
}
show() {
this.tooltipTarget.setAttribute('data-tooltip-show', '');
this.tooltipTarget.classList.remove('ariadne-invisible');
// We need to tell Popper to update the tooltip position
// after we show the tooltip, otherwise it will be incorrect
this.popperInstance.update();
this.dispatch('shown', { detail: { trigger: this.triggerTarget, tooltip: this.tooltipTarget } });
}
hide() {
this.tooltipTarget.removeAttribute('data-tooltip-show');
this.tooltipTarget.classList.add('ariadne-invisible');
this.dispatch('ariadne-hidden', { detail: { trigger: this.triggerTarget, tooltip: this.tooltipTarget } });
}
}
TooltipComponent.targets = ['trigger', 'tooltip'];
TooltipComponent.values = {
placement: { type: String, default: 'top' },
offset: { type: Array, default: [0, 8] }
};
Version data entries
4 entries across 4 versions & 1 rubygems