display specific popup box when hovering over different elements

Question

I'm a beginner in html css js and I have created an iteractive map of some greek islands . What I am trying to do is when I move my mouse on an island I want to display a pop up box with some info about the island . I can position hidden pop up boxes manually above each island but it seems like a very slow way . In my code below I use the <map> and <area> tags to spot each island on the map .

My code(12 greek islands located on an image ):

<div id = "map-container">
  <img src = "IMAGES/island-map.jpg" id="map" usemap="#islandmap">
  <map name="islandmap">
    <area shape="rect" coords="65,54,152,97" id="Patmos">
    <area shape="rect" coords="167,39,264,98" id="Lipsi">
    <area shape="rect" coords="70,166,121,186" id="Kalimnos">
    <area shape="rect" coords="216,153,279,198" id="Leros">
    <area shape="rect" coords="240,216,316,241" id="Kos">
    <area shape="rect" coords="265,278,288,300" id="Nisiros">
    <area shape="rect" coords="754,418,853,451" id="Kastelorizo">
    <area shape="rect" coords="192,611,238,646" id="Kasos">
    <area shape="rect" coords="41,257,130,313" id="Astipalaia">
    <area shape="rect" coords="255,491,294,633" id="Karpathos">
    <area shape="rect" coords="406,339,508,490" id="Rodos">
    <area shape="rect" coords="305,378,389,406" id="Chalki">
    <area shape="rect" coords="405,270,454,315" id="Simi">
    <area shape="rect" coords="301,317,366,358" id="Tilos">
  </map>
</div>

CSS (cursor is pointer when you hover over an island ):

map area:hover {
  cursor: pointer;
}

My web page with the image :

So the problem is how to display a pop up box using javascript above each island when I hover over one without positioning hidden pop up boxes manually on my page . I am not allowed to use jquery since this is a university project . I would appreciate your help with this . Thank you in advance .

Answer 1

Please try this ...

How to use Tooltipster

Steps

---

1. Add library of Tooltipster

<script src="http://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"></script>
<link href="http://iamceege.github.io/tooltipster/dist/css/tooltipster.bundle.min.css" rel="stylesheet" />

2. Add relevent JS for tooltipster

  $(document).ready(function() {
     $('.tooltip').tooltipster({});
  });

3. Then add class and title.

    class="tooltip" title="Patmos"

Try this Snippet

---

$(document).ready(function() {
  $('.tooltip').tooltipster({});
});

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"></script>
<link href="http://iamceege.github.io/tooltipster/dist/css/tooltipster.bundle.min.css" rel="stylesheet" />

<div id = "map-container">
  <img src = "https://www.dreamingreece.com/sites/default/files/dreamingreece_dream_in_greece_dodecanese_dodecanisa_dodekanisa_map_xartis_greece_ellada_greek_islands.jpg" id="map" usemap="#islandmap">
  
  <map name="islandmap">
    <area shape="rect" coords="65,54,152,97" title="Patmos" href="#" class="tooltip">
    <area shape="rect" coords="167,39,264,98" title="Lipsi" href="#" class="tooltip">
    <area shape="rect" coords="70,166,121,186" title="Kalimnos" href="#" class="tooltip">
    <area shape="rect" coords="216,153,279,198" title="Leros" href="#" class="tooltip">
    <area shape="rect" coords="240,216,316,241" title="Kos" href="#" class="tooltip">
    <area shape="rect" coords="265,278,288,300" title="Nisiros" href="#" class="tooltip">
    <area shape="rect" coords="754,418,853,451" title="Kastelorizo" href="#" class="tooltip">
    <area shape="rect" coords="192,611,238,646" title="Kasos" href="#" class="tooltip">
    <area shape="rect" coords="41,257,130,313" title="Astipalaia" href="#" class="tooltip">
    <area shape="rect" coords="255,491,294,633" title="Karpathos" href="#" class="tooltip">
    <area shape="rect" coords="406,339,508,490" title="Rodos" href="#" class="tooltip">
    <area shape="rect" coords="305,378,389,406" title="Chalki" href="#" class="tooltip">
    <area shape="rect" coords="405,270,454,315" title="Simi" href="#" class="tooltip">
    <area shape="rect" coords="301,317,366,358" title="Tilos" href="#" class="tooltip">
  </map>
</div>

For more example

Use popover() function.

data-content value to be shown in popup

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        trigger : 'hover',
        placement : 'top',
    });   
});

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="mx-auto text-center">
  <h1>The map and area elements</h1>
  <p>Hover on the computer, the phone, or the cup of coffee to show popover.</p>

  <img src="https://www.w3schools.com/tags/workplace.jpg" alt="Workplace" usemap="#workmap" class="img-fluid w-100">
 
  <map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" data-content="Computer" data-toggle="popover">
    <area shape="rect" coords="290,172,333,250" alt="Phone" data-content="Phone" data-toggle="popover">
    <area shape="circle" coords="337,300,44" alt="Cup of coffee" data-toggle="popover" data-content="Cup of coffee">
  </map>
</div>