Being a minimalist, I am facing restrictions while working on a website. I desire interactive tooltips to appear when users hover over specific sections of my SVG. However, I also want to incorporate this interactivity within the SVG itself. The challenge is that I have limited knowledge of Javascript. Initially, I attempted to achieve this using CSS only but discovered that embedding CSS inside the SVG restricts the full functionality of CSS, especially in creating dynamic tooltips.
Subsequently, I delved into Javascript, which can also be embedded in the SVG. I found the tooltips generated through Javascript more appealing than those created with the title tag. Nevertheless, there are lingering issues.
One problem is that the SVG file renders properly in Chrome but fails to display in Firefox. The reason behind this inconsistency remains elusive.
Another issue arises even in Chrome where I struggle with displaying multiline tooltips effectively due to limitations. Any advice or suggestions would be greatly appreciated!
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="oidc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 422 339.2">
<style type="text/css">
.st13 {
fill:#d9489b
}
.st13:hover {
cursor:help;
fill:#E66E31;
}
#tooltip {
dominant-baseline: hanging;
font-size: 8px;
}
</style>
<switch>
<g>
<g>
<circle class="st13" cx="47.8" cy="69.2" r="6" data-tooltip-text="I am some fairly long text." />
<circle class="st13" cx="321.2" cy="65.7" r="6" data-tooltip-text="I am some much much much much much much longer text, so long that I cannot discuss or itemize my exact length....it's looooong, very long. I can't say more."/>
</g>
<g id="tooltip" visibility="hidden" transform="translate(87.9511512134412 127.90914747977598)">
<rect x="2" y="2" width="52.90066909790039" height="24" fill="black" opacity="0.4" rx="2" ry="2"></rect>
<rect width="52.90066909790039" height="24" fill="lightblue" rx="2" ry="2"></rect>
<text x="4" y="6">A box</text>
</g>
</g>
<script type="text/ecmascript">
(function() {
var svg = document.getElementById("oidc");
var tooltip = svg.getElementById("tooltip");
var tooltipText = tooltip.getElementsByTagName("text")[0];
var tooltipRects = tooltip.getElementsByTagName("rect");
var triggers = svg.getElementsByClassName("st13");
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");
}
})()
</script>
</switch>
</svg>