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('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('invisible');
        this.dispatch('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

2 entries across 2 versions & 1 rubygems

Version	Path
ariadne_view_components-0.0.6	app/components/ariadne/tooltip-component.js
ariadne_view_components-0.0.5	app/components/ariadne/tooltip-component.js