Tooltip Overlay on Hover for BPMN Tasks

This code is working well. Is this the correct way to use an HTML tag here?

this.eventBus.on("element.hover", 1500, (e) => {
  if (e.element.type === 'bpmn:Task') {
    let tooltips = this.bpmnModeler.get("tooltips");
    let toolTipText = ` <div style="position: relative; width: 300px ; color: #717D7E; padding: 12px; border: 1px solid #BDC3C7; background-color: #ffffff; font-size: small; border-radius: 4px;">${value}<div style="position: absolute; top: 50%; left: -10px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #BDC3C7; transform: translateY(-50%);"></div></div>`;
    let toolTipId = 'toolTipId-' + e.element.id;
    let xx = e.element.x + e.element.width;
    let yy = e.element.y + e.element.height;
    const showTooltip = () => {
      tooltips.remove(toolTipId);
      toolTipId = tooltips.add({
        position: {
          x: xx - 50,
          y: (yy / 2) - 30
        },
        id: toolTipId,
        html: toolTipText
      });
    };
    const removeTooltip = () => {
      tooltips.remove(toolTipId);
    };
    const elementRegistry = this.bpmnModeler.get("elementRegistry");
    const gfx = elementRegistry.getGraphics(e.element);
    gfx.addEventListener('mouseenter', showTooltip);
    gfx.addEventListener('mouseleave', removeTooltip);
    showTooltip();
  }
});

What do you mean by correct way?

let toolTipText = <div style="position: relative; width: 300px ; color: #717D7E; padding: 12px; border: 1px solid #BDC3C7; background-color: #ffffff; font-size: small; border-radius: 4px;">${value}<div style="position: absolute; top: 50%; left: -10px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #BDC3C7; transform: translateY(-50%);"></div></div>;

is this the right way to use html tag here.