Packages

backpex

0.11.0
0.19.6 0.19.5 0.19.4 0.19.3 0.19.2 0.19.1 0.19.0 0.18.3 0.18.2 0.18.1 0.18.0 0.17.4 0.17.3 0.17.2 0.17.1 0.17.0 0.16.3 0.16.2 0.16.1 0.16.0 0.15.3 0.15.2 0.15.1 0.15.0 0.14.0 0.13.0 0.12.0 0.11.0 0.10.0 0.9.1 0.9.0 0.8.2 0.8.1 0.8.0 0.7.1 0.7.0 0.6.0 0.5.1 0.5.0 0.4.0 0.3.2 0.3.1 0.3.0 0.2.0 0.1.1

Highly customizable administration panel for Phoenix LiveView applications.

HexDocs

Current section

Files

Jump to
Readme
45 Versions
14 Dependencies
Dependants
Files
Activity
backpex assets js hooks _tooltip.js
Raw

assets/js/hooks/_tooltip.js 

/**

 * This hooks displays a statically positioned tooltip which is not affected by parent elements and their overflow.

 */

export default {

  mounted () {

    this.tooltip = null

    this.controller = new AbortController()

    const signal = this.controller.signal



    this.el.addEventListener('mouseenter', () => {

      const text = this.el.getAttribute('data-tooltip')

      if (!text) return



      this.tooltip = document.createElement('div')

      this.tooltip.innerText = text

      this.tooltip.className = `

        fixed z-50 -translate-x-1/2 px-2 py-1 bg-neutral  rounded-btn

        text-neutral-content text-sm shadow-sm whitespace-nowrap

        before:content-['']

        before:absolute before:w-0 before:h-0 before:left-1/2 before:-translate-x-1/2 before:top-full

        before:border-l-4 before:border-r-4 before:border-t-4 before:border-transparent before:border-t-neutral

      `



      document.body.appendChild(this.tooltip)

      this.updateTooltipPosition()

    }, { signal })



    this.el.addEventListener('mouseleave', () => {

      if (this.tooltip) {

        this.tooltip.remove()

        this.tooltip = null

      }

    }, { signal })



    window.addEventListener('scroll', () => { this.updateTooltipPosition() }, { signal })

  },

  destroyed () {

    this.controller.abort()



    if (this.tooltip) {

      this.tooltip.remove()

    }

  },

  updateTooltipPosition () {

    if (!this.tooltip) return



    const rect = this.el.getBoundingClientRect()

    this.tooltip.style.left = `${rect.left + rect.width / 2}px`

    this.tooltip.style.top = `${rect.top - this.tooltip.offsetHeight - 6}px`

  }

}