Sample Hover Events Markers implementation

This is the jsfiddle implementation of helloworld.html with custom hover markers

by ChartIQ Library

HTML

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />

<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>

<div id="stxEventHover" class="myEvents">
  <span class="content"></span>
  <span class="tooltip"></span>
</div>

CSS

.myEvents {
  position: absolute;
  text-align: center;
  width: 40px;
  height: 20px;
  line-height: 20px;
  color: white;
}

.myEvents.hoverMarker {
  background-color: pink;
  border: 2px solid black;
}

/*  create some rudimentary styling for our tooltip class */
.tooltip {
  display: inline;
  position: relative;
}

.hoverMarker:hover .tooltip:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(title);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 50px;
  content: attr(title);
}

.hoverMarker:hover .tooltip:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 11px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js";
import sampleData from "https://jsfiddle.chartiq.com/chart/examples/data/STX_SAMPLE_DAILY.js";

// Activate the License Key
import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js";
getLicenseKey(CIQ);

const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer")
});

function showEvents() {
  var newNode;
  for (let i = 0; i < stxx.masterData.length - 10; i += 5) {
    //hover markers
    newNode = document.querySelector("#stxEventHover").cloneNode(true);
    newNode.id = null;
    newNode.querySelector(".content").innerHTML = i;
    newNode.querySelector(".tooltip").title = 'Hover for datapoint ' + i;
    newNode.classList.add("hoverMarker");
    new CIQ.Marker({
      stx: stxx,
      xPositioner: "date",
      x: stxx.masterData[i].DT,
      label: "events",
      node: newNode
    });
  }

  stxx.draw();
}

stxx.loadChart("SPY", sampleData);

showEvents();