Contents

import { createPopper } from '@popperjs/core'

class Popover {
  constructor(
    triggerElement = '#triggerElement',
    tooltip = '#tooltip',
    placement = 'left',
    offset = ''
  ) {
    this.triggerElement = triggerElement
    this.tooltip = tooltip
    this.placement = placement
    this.offset = offset
    this.setupPopper()
  }

  //getters
  get popoverTriggerElement() {
    return document.querySelector(this.triggerElement)
  }
  get popoverTooltip() {
    return document.querySelector(this.tooltip)
  }
  get popoverPlacement() {
    return this.placement
  }
  get popoverOffset() {
    return this.offset
  }

  attachEvents() {
    this.popoverTriggerElement.addEventListener('click', () => {
      this.popoverTooltip.classList.toggle('show')
      this.popper.update()
    })
  }

  setupPopper() {
    this.popper = createPopper(this.popoverTriggerElement, this.popoverTooltip, {
      placement: this.popoverPlacement,
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: this.offset,
          },
        },
      ],
    })

    this.attachEvents()
  }
}

export default Popover

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
playbook_ui-4.2.0	app/pb_kits/playbook/pb_popover/_popover.js
playbook_ui-4.1.2	app/pb_kits/playbook/pb_popover/_popover.js