Stimulus - integrate with popper.js

controllers index.js

// app/javascript/controllers/index.js

import PopperController from "./popper_controller"
application.register("popper", PopperController)

popper_controller.js

// app/javascript/controllers/popper_controller.js
import { createPopper } from '@popperjs/core';
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("Popper connect! 123")
    const el = this.element
    const target = this.getTarget()
    console.log(el)
    console.log(target)
    this.target = target
  
    const showEvents = ['mouseenter', 'focus'];
    const hideEvents = ['mouseleave', 'blur'];
    
    showEvents.forEach((event) => {
      el.addEventListener(event, () => this.show(target));
    });
    
    hideEvents.forEach((event) => {
      el.addEventListener(event, () => this.hide(target));
    });
  
    this.popper = createPopper(el, target, {
      placement: 'right',
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 8],
          },
        },
      ],
    });
  }

  disconnect() {
    this.popper.destroy();
  }

  getTarget() {
    return document.querySelector(this.data.get("target"));
  }

  show(target) {
    // const target = this.getTarget()
    target.setAttribute('data-show', '');
    // We need to tell Popper to update the tooltip position
    // after we show the tooltip, otherwise it will be incorrect
    this.popper.update();
  }
  
  hide(target) {
    // const target = this.getTarget()
    target.removeAttribute('data-show');
  }
}