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 and tags to spot each island on the map .

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

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 .

user_13368658 · Answer

Please try this ...

How to use Tooltipster

Steps

Add library of Tooltipster

Add relevent JS for tooltipster

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

Then add class and title.

    class="tooltip" title="Patmos"

Try this Snippet

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

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',
    });   
});

 
  
  


  The map and area elements
  Hover on the computer, the phone, or the cup of coffee to show popover.

display specific popup box when hovering over different elements

1 Answers

Please try this ...

For more example