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();
}
});