#tooltip { dominant-baseline: hanging; } Tooltip (function() { var svg = document.getElementById(‘tooltip-svg-6’); var tooltip = svg.getElementById(‘tooltip’); var tooltipText = tooltip.getElementsByTagName(‘text’)[0]; var tooltipRects = tooltip.getElementsByTagName(‘rect’); var triggers = svg.getElementsByClassName(‘tooltip-trigger’); for (var i = 0; i < triggers.length; i++) { triggers[i].addEventListener(‘mousemove’, showTooltip); triggers[i].addEventListener(‘mouseout’, hideTooltip); } function showTooltip(evt) { var CTM = svg.getScreenCTM(); var x = (evt.clientX – CTM.e + 6) / CTM.a; var y = (evt.clientY – CTM.f + 20) / CTM.d; tooltip.setAttributeNS(null, “transform”, “translate(” + x + ” ” + y + “)”); tooltip.setAttributeNS(null, “visibility”, “visible”); tooltipText.firstChild.data = evt.target.getAttributeNS(null, “data-tooltip-text”); var length = tooltipText.getComputedTextLength(); for (var i = 0; i < tooltipRects.length; i++) { tooltipRects[i].setAttributeNS(null, “width”, length + 8); } } function hideTooltip(evt) { tooltip.setAttributeNS(null, “visibility”, “hidden”); } })()