svg + div mouseover popup - css

Question

hej there.
i created an svg from a complex image, showing a city map. including tiny green boxes to mark certain houses, etc. with A,B,C or other. (can be seen in screenshot)
on mouseover, a div box should appear (with more than a tooltip-line - as shown in the screenshot and by code) - positioned within the viewbox and next to the pointer.
alternatively it could be an overlay - centered within the viewbox - that disappears when moving the pointer away from the anker.
i was not able to achieve this with plain css, working with combined #C .mark #markc (for example) and visibility.
SVG-'box':
<g id="C">
<rect class="cls-245" x="88.2" y="523.4" width="11.2" height="9.26"/>
<g class="cls-2"><path class="cls-6" d="M92.9,528.7c0,.9.4,1.4,1,1.4s.9-.4.9-1h1.3v.2a2,2,0,0,1-2.2,1.9,2.2,2.2,0,0,1-2.3-2.5v-.6a2.2,2.2,0,0,1,2.3-2.5,2,2,0,0,1,2.2,1.9v.2H94.8c0-.6-.3-1-.9-1s-1,.5-1,1.4Z"/></g>
</g>
DIV to appear:
<div class="mark" id="markc">
<div class="thead">
<div class="pin">C</div> <div class="label">culpepper crescent</div>
</div>
<div class="tdetail">
<p class="descrp">Bewohner</p>
<p class="peops">Heathcote Barbbary<br>Lynn Stark</p>
</div>
</div>
CSS code:
#karte {
width: 90%;
position: relative;
margin: auto;
margin-top: 70px;
border: #fff solid 10px;
outline: #ceccc4 solid 1px;
}
.mark {
width: 250px;
min-height: 100px;
position: relative;
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
line-height: 110%;
font-weight: normal;
z-index: 1;
border: 10px solid #fff;
}
.thead {
display: inline-flex;
background-position-y: bottom;
font-family: Roboto Slab;
letter-spacing: .5px;
text-transform: uppercase;
}
.pin {
background-color: #4e9295;
width: 10%;
text-align: center;
font-size: 15px;
color: #fff;
padding: 8px;
}
.label {
background-color: #D6EBEC;
width: 90%;
font-size: 12px;
text-align: left;
padding: 8px;
}
.tdetail {
background: #E9E9E9;
color: #4d4e52;
font-family: calibri;
min-height: 75px;
text-align: left;
padding: 0px 10px 10px 10px;
border-top: 8px solid #fff;
}
.tdetail .descrp {
color: #4d4e52;
text-transform: uppercase;
margin-bottom: -10px;
font-weight: 600;
font-size: 15px;
}
.tdetail .peops {
font-weight: 300;
font-size: 12px;
padding: 8px;
}
it is supposed to be a 'present'. i have nearly no experience with javascript - i am happy to use it as a solution, but might need a 'clear' instruction. it is up to 25 'pins' on the complete map.
many thanks!
screenshot

Answer 1

Here's a very simple example implementation to get you started.
You'll need to do a little more work to make it work with more than one tooltip. Not also that it assumes your map is at 1:1. If your SVG has a viewBox or is otherwise scaled, you need to do some work to get the correct coordinates to show the tooltip at. You can find out how to do that by searching Stack Overflow.
var C = document.getElementById("C");
// Add an event handler to C that fires when the mouse moves over it
C.addEventListener("mousemove", function(evt) {
let markc = document.getElementById("markc");
// Position the tooltip element near the mouse
markc.style.left = (evt.offsetX + 10) + "px";
markc.style.top = evt.offsetY + "px";
// Show the tooltip element
markc.classList.remove("hidden");
});
// Add an event handler to C that fires when the mouse leaves the element
C.addEventListener("mouseout", function(evt) {
hideElement("markc");
});
// Hide the element with given id
function hideElement(id) {
document.getElementById(id).classList.add("hidden");
}
// Start out with the tooltip hidden
hideElement("markc");
#karte {
width: 90%;
position: relative;
margin: auto;
margin-top: 70px;
border: #fff solid 10px;
outline: #ceccc4 solid 1px;
}
.mark {
width: 250px;
min-height: 100px;
position: absolute; /* changed to absolute so we can position it where we want */
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
line-height: 110%;
font-weight: normal;
z-index: 1;
border: 10px solid #fff;
}
.thead {
display: inline-flex;
background-position-y: bottom;
font-family: Roboto Slab;
letter-spacing: .5px;
text-transform: uppercase;
}
.pin {
background-color: #4e9295;
width: 10%;
text-align: center;
font-size: 15px;
color: #fff;
padding: 8px;
}
.label {
background-color: #D6EBEC;
width: 90%;
font-size: 12px;
text-align: left;
padding: 8px;
}
.tdetail {
background: #E9E9E9;
color: #4d4e52;
font-family: calibri;
min-height: 75px;
text-align: left;
padding: 0px 10px 10px 10px;
border-top: 8px solid #fff;
}
.tdetail .descrp {
color: #4d4e52;
text-transform: uppercase;
margin-bottom: -10px;
font-weight: 600;
font-size: 15px;
}
.tdetail .peops {
font-weight: 300;
font-size: 12px;
padding: 8px;
}
.cls-245 {
fill: green;
}
.cls-6 {
fill: white;
}
/* Needs to be position relative so we can later position the tooltip relative to it. */
.container {
position: relative;
}
/* class used to hide the tooltip when we don't want it showing */
.hidden {
display: none;
}
<div class="container">
<svg width="400" height="700">
<g id="C">
<rect class="cls-245" x="88.2" y="523.4" width="11.2" height="9.26"/>
<g class="cls-2"><path class="cls-6" d="M92.9,528.7c0,.9.4,1.4,1,1.4s.9-.4.9-1h1.3v.2a2,2,0,0,1-2.2,1.9,2.2,2.2,0,0,1-2.3-2.5v-.6a2.2,2.2,0,0,1,2.3-2.5,2,2,0,0,1,2.2,1.9v.2H94.8c0-.6-.3-1-.9-1s-1,.5-1,1.4Z"/></g>
</g>
</svg>
<div class="mark" id="markc">
<div class="thead">
<div class="pin">C</div>
<div class="label">culpepper crescent</div>
</div>
<div class="tdetail">
<p class="descrp">Bewohner</p>
<p class="peops">Heathcote Barbbary<br>Lynn Stark</p>
</div>
</div>
</div>