OnClick event inside ExternalTooltipHandler

[rushikesh-nage]

I am having trouble creating the OnClick event inside the external tooltip.
A sample copy of code.

const getOrCreateTooltip = (chart) => {
let tooltipEl = chart.canvas.parentNode.querySelector("div")

    if (!tooltipEl) {
      tooltipEl = document.createElement("div")
      tooltipEl.style.background = "white"
      tooltipEl.style.borderRadius = "3px"
      tooltipEl.style.color = "black"
      tooltipEl.style.opacity = 1
      tooltipEl.style.position = "absolute"
      tooltipEl.style.transform = "translate(-50%, 0)"
      tooltipEl.style.transition = "all .1s ease"

      const table = document.createElement("table")
      table.style.margin = "0px"

      tooltipEl.appendChild(table)
      chart.canvas.parentNode.appendChild(tooltipEl)
    }

    return tooltipEl
  }

const externalTooltipHandler = (context, contextIndex) => {
const { chart, tooltip } = context
const tooltipEl = getOrCreateTooltip(chart)

    if (tooltip.opacity === 0) {
      tooltipEl.style.opacity = 0
      return
    }
    if (tooltip.body) {
      const titleLines = tooltip.title || []
      const bodyLines = tooltip.body.map((b) => b.lines)

      const tableHead = document.createElement("thead")

      titleLines.forEach((title, index) => {
        const tr = document.createElement("tr")
        tr.style.borderWidth = 0
        const th = document.createElement("th")
        th.style.borderWidth = 0
        let videoEndTime =
          convertSecondsToDateTimeString(
            getTotalSecondsFromDateTimeString(
              tooltip.dataPoints[index].label.split(" ")[0]
            ) + tooltip.dataPoints[index].raw.y,
            null,
            false
          ) + ".00"
        const span = document.createElement("span")
        span.style.fontSize = "13px"
        span.style.display = "inline-block"
        span.innerText = videoEndTime
        const span1 = document.createElement("span")
        span1.style.fontSize = "13px"
        span1.style.display = "inline-block"
        let videoStartTime =
          tooltip.dataPoints[index].label.split(" ")[0] + " - "
        span1.innerText = videoStartTime
        const video = document.createElement("video")
        video.controls = true
        video.autoplay = true
        video.currentTime =
          getTotalSecondsFromDateTimeString(videoStartTime)
        video.style.display = "block"
        video.addEventListener("loadedmetadata", function () {
          const endTime = videoEndTime

          video.addEventListener("timeupdate", function () {
            if (
              video.currentTime >=
              getTotalSecondsFromDateTimeString(videoEndTime)
            ) {
              video.pause()
            }
          })
        })
        video.src ="./abc.mp4"
        video.height = 180
        video.width = 290
        th.appendChild(video)

        th.appendChild(span1)
        th.appendChild(span)
        tr.appendChild(th)
        tableHead.appendChild(tr)
      })
      const tableBody = document.createElement("tbody")
      bodyLines.forEach((body, index) => {
        const colors = tooltip.labelColors[index]
        const span = document.createElement("span")
        span.style.fontSize = "13px"
        span.style.paddingLeft = "90px"
        span.style.display = "inline-block"
        span.innerText = new Date().toLocaleDateString([], {
          month: "long",
          day: "numeric",
          year: "numeric",
        })
        const span1 = document.createElement("Button")
        span1.style.display = "inline-block"
        span1.innerText = tooltip.dataPoints[index].dataset.label
        span1.addEventListener("click", function () {
          // code to execute when the button is clicked
          console.log("Button clicked!")
        })
        const tr = document.createElement("tr")
        tr.style.backgroundColor = "inherit"
        tr.style.borderWidth = 0
        const td = document.createElement("td")
        td.style.borderWidth = 0
        const text = document.createTextNode(body)
        td.appendChild(span1)
        td.appendChild(span)

        tr.appendChild(td)
        tableBody.appendChild(tr)
      })
      const tableRoot = tooltipEl.querySelector("table")
      while (tableRoot.firstChild) {
        tableRoot.firstChild.remove()
      }
      tableRoot.appendChild(tableHead)
      tableRoot.appendChild(tableBody)
    }
    const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas
    tooltipEl.style.opacity = 1
    tooltipEl.style.left = positionX + tooltip.caretX + 20 + "px"
    tooltipEl.style.top = positionY + tooltip.caretY + 20 + "px"
    tooltipEl.style.font = tooltip.options.bodyFont.string
    tooltipEl.style.padding =
      tooltip.options.padding + "px " + tooltip.options.padding + "px"
    tooltipEl.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.25)"
  }

In this also getting trouble using controls in the video.
Please let me know how should I resolve these.