title in SVG: how to make it appear faster? - html

Question

I have an html page with a JS script generating a SVG image made of many polygons (SVG is added inline inside the HTML).
I gave some of them a title, so that the user can hoover and get a caption.
Example:
<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 5,7 10,10 10,16 5,19 0,16" fill="rgb(114,132,56)" stroke="rgb(114,132,56)" stroke-width="1"><title>Washington</title></polygon>
</svg>
There is a delay for the browser to display this text.
I would like for it to appear faster.
Is this doable? Or do I have to change the structure to use something like map for image?
I found how to customize the appearance of this tooltip, but not how to change the speed for display.

Answer 1

There is no way to change this via CSS. However you can mimic the tooltip with Javascript. Here is an example improving on a solution from #Timmmm. The improvement consists in preserving the title elements for users using a screen reader.
function showTooltip(event) {
let element = event.target;
let tooltipElement = document.getElementById('tooltip');
let title;
if (!element.dataset.title) {
let titleElement = element.querySelector('title');
title = titleElement.innerHTML;
event.target.setAttribute('data-title', title);
titleElement.parentNode.removeChild(titleElement);
} else {
title = element.dataset.title;
}
tooltipElement.innerHTML = title;
tooltipElement.style.display = 'block';
tooltipElement.style.left = event.pageX + 10 + 'px';
tooltipElement.style.top = event.pageY + 10 + 'px';
}
function hideTooltip() {
var tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
}
#tooltip {
background: cornsilk;
border: 1px solid black;
border-radius: 3px;
padding: 2px 4px;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon
onmousemove="showTooltip(event);"
onmouseout="hideTooltip();"
points="0,10 5,7 10,10 10,16 5,19 0,16"
fill="rgb(114,132,56)"
stroke="rgb(114,132,56)"
stroke-width="1">
<title>Washington</title>
</polygon>
</svg>
<div id="tooltip" style="position: absolute; display: none;"></div>
To optimise for small file size when many shapes are present, both the styles and event binding can be moved out of the SVG and into Css / Javascript:
function showTooltip(event) {
let element = event.target;
let tooltipElement = document.getElementById('tooltip');
let title;
if (!element.dataset.title) {
let titleElement = element.querySelector('title');
title = titleElement.innerHTML;
event.target.setAttribute('data-title', title);
titleElement.parentNode.removeChild(titleElement);
} else {
title = element.dataset.title;
}
tooltipElement.innerHTML = title;
tooltipElement.style.display = 'block';
tooltipElement.style.left = event.pageX + 10 + 'px';
tooltipElement.style.top = event.pageY + 10 + 'px';
}
function hideTooltip() {
var tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
}
document.addEventListener('DOMContentLoaded', function(event) {
const tooltipTriggers = document.querySelectorAll('polygon');
Array.from(tooltipTriggers).map(trigger => {
trigger.addEventListener('mousemove', showTooltip);
trigger.addEventListener('mouseout', hideTooltip);
})
});
.tooltip {
position: absolute;
background: cornsilk;
border: 1px solid black;
border-radius: 3px;
padding: 2px 4px;
}
svg .grey {
fill: rgb(114, 132, 56);
stroke: rgb(114, 132, 56);
stroke-width: 1;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon
class="grey"
points="0,10 5,7 10,10 10,16 5,19 0,16">
<title>Washington</title>
</polygon>
</svg>
<div id="tooltip" class="tooltip" style="display: none;"></div>