Sha256: 6134564d5cc3e8b69246358466dab3647c3958cc2f669706c069ba0ae2892dfb
Contents?: true
Size: 1.57 KB
Versions: 90
Compression:
Stored size: 1.57 KB
Contents
import { Controller } from '@hotwired/stimulus';
import { createPopper } from '@popperjs/core';
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] },
};
export default TooltipComponent;
Version data entries
90 entries across 90 versions & 1 rubygems