Sha256: 89fb25e65f690b41565a1216af00060fc05a1291bb64dcd6b70a7de6289eb609
Contents?: true
Size: 1.63 KB
Versions: 122
Compression:
Stored size: 1.63 KB
Contents
import {Controller} from '@hotwired/stimulus'
import {createPopper} from '@popperjs/core'
import type {Instance, Placement} from '@popperjs/core'
export default class TooltipComponent extends Controller {
static targets = ['trigger', 'tooltip']
declare readonly triggerTarget: HTMLElement
declare readonly tooltipTarget: HTMLElement
static values = {
placement: {type: String, default: 'top'},
offset: {type: Array, default: [0, 8]},
}
declare readonly placementValue: Placement
declare readonly offsetValue: Array<number>
popperInstance: Instance
// 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}})
}
}
Version data entries
122 entries across 122 versions & 1 rubygems