Looking for help on adding a CSS-only tooltip to an SVG map on my WordPress website. The tooltip should appear when hovering over countries with the class st0 and display information from the data-info attribute of each country's path in the SVG. Here is the code I have so far: https://codepen.io/ohad-olshevsky/pen/bGbNOVW I attempted to add the tooltip style mentioned here without success: https://www.w3schools.com/css/css_tooltip.asp Since I am using the Elementor pro plugin and inserting the map with the HTML widget, I want to achieve this tooltip effect using only CSS due to limitations with JS and JQ. Thanks for any assistance provided.
I've experimented with jQuery and JavaScript but lack sufficient experience in these areas, and the Elementor plugin does not integrate well with them.
CSS:
#un-map-by-ohad {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.st0{fill:#ffFFFF;stroke:#262626;}
.st0{
transition-property: opacity;
transition-duration: .7s;
transition-timing-function: ease;
}
.st1{fill:#262626;stroke:#A8D3E8;stroke-width:5.5;}
.st0:hover {
fill:white;
opacity: 0.3;
stroke-width: 0px;
stroke: #476ebf;
stroke-opacity: o;
background-size: 70%;
transition-property: opacity;
transition-duration: .7s;
transition-timing-function: ease;
}
.st2{color:#262626;stroke:#FFFFFF;stroke-width:0.5;}
.st3{fill:#262626;stroke:#FFFFFF;stroke-width:0.5;stroke-opacity:0.9412;}
.st4{color:transparent;}
#info-box
{
display: none;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background-color: #ffffff;
border: 2px solid #476ebf;
border-radius: 5px;
padding: 5px;
font-color:white;
font-family: open sans;
}
HTML
<path id="es" data-info="<div>Spain</div><div>2.6%</div>" class="st0" d="M5036.5,4876c10,4.3,21.5,7.2,28.7,12.9c2.9,2.9,4.3,18.6,12.9,17.2c11.5-1.4,21.5-8.6,34.4-8.6"/>