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('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}})
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

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