I am trying to create a webpage with an image that has tooltips on it. The issue I'm running into is that the image must be responsive and the divs I am using for the tooltips must move and respond with the image, so they can stay anchored in the correct place. I'm using pure CSS/HTML, as I'm not terribly confident in Javascript. Is there a CSS/HTML solution I can try, or do I need to delve into Javascript to make it work?
Here's the code I'm working with:
<body>
<h1 style="text-align:center;">New Portsmouth Town Map</h1>
<div class="container">
<div class="item1" id="image-map">
<img src="https://i.imgur.com/7tnwBCS.jpg" width="100%" height="auto">
<div class="pin" style="left:550px; top:900px;">
<div class="tooltip">
<h2>New Portsmouth Public Library</h2>
<p>One of the many libraries in the US that have fallen victim to budgetary neglect. Despite that, it has an impeccable shelving system and very thorough newspaper archives. Community events such as book clubs and free classes are held there.</p>
</div>
</div>
<div class="pin" style="left:550px; top:700px;">
<div class="tooltip">
<h2>Hartsford Plaza</h2>
<p>Donated by the prestigious Hartsford family in the 19th century, the plaza lays in the center of town. The farmer’s market takes place here every Sunday.</p>
</div>
</div>
<div class="pin" style="left:780px; top:550px;">
<div class="tooltip">
<h2>Lynch's Catch</h2>
<p>yo does niko work here</p>
</div>
</div>
</div>
<div class="locationlist item2">
<div class="location">
<h2>New Portsmouth Public Library</h2>
<p>One of the many libraries in the US that have fallen victim to budgetary neglect. Despite that, it has an impeccable shelving system and very thorough newspaper archives. Community events such as book clubs and free classes are held there.</p>
</div>
<div>
<h2>Hartsford Plaza</h2>
<p>Donated by the prestigious Hartsford family in the 19th century, the plaza lays in the center of town. The farmer’s market takes place here every Sunday.</p>
</div>
<div><h2>Hoh Rainforest</h2>
<p>Desc here</p></div>
<div><h2>Lynch's Catch</h2>
<p>yo does niko work here</p></div>
<div><h2>Pallas Books</h2>
<p>Desc here</p></div>
<div><h2>Briarden Pack Commune</h2>
<p>Desc here</p></div>
<div><h2>7/11</h2>
<p>Desc here</p></div>
<div><h2>Briar & Birch Spiritual Shoppe</h2>
<p>Desc here</p></div>
<div><h2>Portsmouth Housing Co-op</h2>
<p>Desc here</p></div>
<div><h2>Town Hall</h2>
<p>Desc here</p></div>
<div><h2>Hartsford Park</h2>
<p>Desc here</p></div>
<div><h2>Portsmouth Historical Society</h2>
<p>Desc here</p></div>
<div><h2>Vanilla Bean Coffee Shop</h2>
<p>Desc here</p></div>
</div>
</div>
/* Relative positioning*/
#image-map {
position: relative;
margin: auto;
text-align:center;
}
.pin {
position: absolute;
background: url(https://i.imgur.com/zZ38MFi.png);
width: 25px;
height: 25px;
z-index: 999;
}
.pin:hover .tooltip {
display:block;
}
.tooltip {
display:none;
width:250px;
position:absolute;
background:black;
padding:.5em;
border-radius:.5em;
}
.locationlist {
height:1000px;
margin-left:.5em;
border:1px white solid;
padding:.5em;
overflow:scroll;
}
.location {
background-color:#202f57;
padding:.1em;
}
.container {
display:flex;
justify-content:flex-end;
}
.item1 {
flex-basis:auto;
}
.item2 {
flex-basis:auto;
}
/* unvisited link */
a:link {
color: #da8080;
}
/* visited link */
a:visited {
color: #DBA34F;
}
/* mouse over link */
a:hover {
}
/* selected link */
a:active {
}
body {
background-color: #273E7A;
color: #DEEBFF;
font-family: FiraSans;
}
#container {
max-width:800px;
border-style: solid;
border-width:2px;
/* border-color:#4d6297; */
border-radius:6px;
border-image: linear-gradient(0deg, #273E7A 10%, #DEEBFF 80%) 0.5;
margin:auto;
padding:10px;
display:flex;
}
#banner {
font-family: DancingScript;
font-size: 64px;
color:#DBA34F;
}
.sidebar {
width:20%;
height:100%;
border-radius:3px;
}
.sidebarbutton {
background-color: #701919;
border: none;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
display:flex;
}
.sidebartext {
background-color:#506cb4;
margin:10px 0px 0px 0px;
padding: 5px 2px 5px 2px;
}
.maincontent {
width:80%;
padding:5px 5px 5px 50px;
font-size: 18px;
text-align:justify;
}
.highlight {
color:#DBA34F;
text-align:center;
font-size:22px;
}
And here's a jsfiddle with my code: https://jsfiddle.net/qk8rgnp2/
It's pretty easy to see here, the red pushpin images are intended to be placed on the map but here are are static while the rest of the page is relative.
Instead of setting up the location using left: and top: using pixels, use % instead so your markup will look like the code below. If you scale your screen the pins will move with the image.
Note, I've used bottom: rather than top: as the pin point is on the bottom LHS of the image so using bottom: rather than top: means that the pin point stays in place.
/* Relative positioning*/
#image-map {
position: relative;
margin: auto;
text-align: center;
}
.pin {
position: absolute;
background: url(https://i.imgur.com/zZ38MFi.png);
width: 25px;
height: 25px;
z-index: 999;
}
.pin:hover .tooltip {
display: block;
}
.tooltip {
display: none;
width: 250px;
position: absolute;
background: black;
padding: .5em;
border-radius: .5em;
}
.locationlist {
height: 1000px;
margin-left: .5em;
border: 1px white solid;
padding: .5em;
overflow: scroll;
}
.location {
background-color: #202f57;
padding: .1em;
}
.container {
display: flex;
justify-content: flex-end;
}
.item1 {
flex-basis: auto;
}
.item2 {
flex-basis: auto;
}
/* unvisited link */
a:link {
color: #da8080;
}
/* visited link */
a:visited {
color: #DBA34F;
}
/* mouse over link */
a:hover {}
/* selected link */
a:active {}
body {
background-color: #273E7A;
color: #DEEBFF;
font-family: FiraSans;
}
#container {
max-width: 800px;
border-style: solid;
border-width: 2px;
/* border-color:#4d6297; */
border-radius: 6px;
border-image: linear-gradient(0deg, #273E7A 10%, #DEEBFF 80%) 0.5;
margin: auto;
padding: 10px;
display: flex;
}
#banner {
font-family: DancingScript;
font-size: 64px;
color: #DBA34F;
}
.sidebar {
width: 20%;
height: 100%;
border-radius: 3px;
}
.sidebarbutton {
background-color: #701919;
border: none;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
display: flex;
}
.sidebartext {
background-color: #506cb4;
margin: 10px 0px 0px 0px;
padding: 5px 2px 5px 2px;
}
.maincontent {
width: 80%;
padding: 5px 5px 5px 50px;
font-size: 18px;
text-align: justify;
}
.highlight {
color: #DBA34F;
text-align: center;
font-size: 22px;
}<h1 style="text-align:center;">New Portsmouth Town Map</h1>
<div class="container">
<div class="item1" id="image-map">
<img src="https://i.imgur.com/7tnwBCS.jpg" width="100%" height="auto">
<div class="pin" style="left:60%; bottom:30%;">
<div class="tooltip">
<h2>New Portsmouth Public Library</h2>
<p>Some useful info.</p>
</div>
</div>
<div class="pin" style="left:30%; bottom:75%;">
<div class="tooltip">
<h2>Hartsford Plaza</h2>
<p>info..</p>
</div>
</div>
<div class="pin" style="left:80%; bottom:50%;">
<div class="tooltip">
<h2>Lynch's Catch</h2>
<p>yo does niko work here. You i think he does.</p>
</div>
</div>
</div>
<div class="locationlist item2">
<div class="location">
<h2>New Portsmouth Public Library</h2>
<p>One of the many libraries in the US that have fallen victim to budgetary neglect. Despite that, it has an impeccable shelving system and very thorough newspaper archives. Community events such as book clubs and free classes are held there.</p>
</div>
<div>
<h2>Hartsford Plaza</h2>
<p>Donated by the prestigious Hartsford family in the 19th century, the plaza lays in the center of town. The farmer’s market takes place here every Sunday.</p>
</div>
<div>
<h2>Hoh Rainforest</h2>
<p>Desc here</p>
</div>
<div>
<h2>Lynch's Catch</h2>
<p>yo does niko work here</p>
</div>
<div>
<h2>Pallas Books</h2>
<p>Desc here</p>
</div>
<div>
<h2>Briarden Pack Commune</h2>
<p>Desc here</p>
</div>
<div>
<h2>7/11</h2>
<p>Desc here</p>
</div>
<div>
<h2>Briar & Birch Spiritual Shoppe</h2>
<p>Desc here</p>
</div>
<div>
<h2>Portsmouth Housing Co-op</h2>
<p>Desc here</p>
</div>
<div>
<h2>Town Hall</h2>
<p>Desc here</p>
</div>
<div>
<h2>Hartsford Park</h2>
<p>Desc here</p>
</div>
<div>
<h2>Portsmouth Historical Society</h2>
<p>Desc here</p>
</div>
<div>
<h2>Vanilla Bean Coffee Shop</h2>
<p>Desc here</p>
</div>
</div>
</div>