Sha256: 79b9d9aac9e159cf43c75c3cb5dedce82bc4b1c3baef21ee511d1cfd291aea7a
Contents?: true
Size: 1.62 KB
Versions: 172
Compression:
Stored size: 1.62 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
172 entries across 172 versions & 1 rubygems