Remove tooltip at out of hover

Question

I have an image where I put some coords and display a tooltip like this:

 var areas = document.getElementsByTagName('area'); var tooltip = document.getElementById('tooltip'); for (var i = 0; i < areas.length; i++) { areas[i].addEventListener("mouseover", updateTooltip) } function updateTooltip() { tooltip.innerHTML = this.getAttribute('data-text'); var coordinates = this.getAttribute('coords').split(',') tooltip.style.left = coordinates[0] + 'px'; tooltip.style.top = coordinates[coordinates.length - 1] + 'px'; } 

 .tooltip { position: absolute; z-index: 9999; border: 1px solid black; min-width: 100px; max-width: 150px; background: white; } area { position: relative; } .parent{ position:relative; } 

 <div class="parent"> <img id="mapImage" src="https://i.imgur.com/Y7HuHDQ.png" usemap="#image-map"> <map name="image-map"> <area target="" data-text="USA Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="USA" title="USA" href="" coords="110,140,182,141,186,148,198,146,198,140,214,139,224,134,234,143,221,150,213,154,205,156,205,170,199,174,194,181,193,188,162,182,158,171,149,173,145,179,141,170,124,168,121,173,112,168,105,158" shape="poly"> <area target="" data-text="Mexico Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="MEXICO" title="MEXICO" href="" coords="124,172,137,171,141,178,152,173,160,181,162,204,179,199,179,211,157,212,173,216,146,204,136,196,125,188" shape="poly"> <area target="" data-text="Japan Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="JAPAN" title="JAPAN" href="" coords="705,106,716,106,721,146,687,184,667,175" shape="poly"> <area target="" data-text="Germany Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="GERMANY" title="GERMANY" href="" coords="418,111,436,108,433,124,418,124" shape="poly"> <div class="tooltip" id="tooltip"></div> </map> </div> 

Problem is I want to remove tooltip when mouse come over tooltip or coords. Because if we hover USA, we can't hover México because tooltip don´t allow it.

How can I achieve it? Regards

Answer 1

Use mouseeneter & mouseleave event and create another function which will trigger on mouseleave .Inside this function set display:none to the tooltip and on mouse enter set it to display:block

 var areas = document.getElementsByTagName('area'); var tooltip = document.getElementById('tooltip'); for (var i = 0; i < areas.length; i++) { areas[i].addEventListener("mouseenter", updateTooltip); areas[i].addEventListener("mouseleave", removeTooltip) } function updateTooltip() { tooltip.style.display = "block" tooltip.innerHTML = this.getAttribute('data-text'); var coordinates = this.getAttribute('coords').split(',') tooltip.style.left = coordinates[0] + 'px'; tooltip.style.top = coordinates[coordinates.length - 1] + 'px'; } function removeTooltip() { tooltip.style.display = "none" } 

 .tooltip { position: absolute; z-index: 9999; border: 1px solid black; min-width: 100px; max-width: 150px; background: white; } area { position: relative; } .parent { position: relative; } 

 <div class="parent"> <img id="mapImage" src="https://i.imgur.com/Y7HuHDQ.png" usemap="#image-map"> <map name="image-map"> <area target="" data-text="USA Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="USA" title="USA" href="" coords="110,140,182,141,186,148,198,146,198,140,214,139,224,134,234,143,221,150,213,154,205,156,205,170,199,174,194,181,193,188,162,182,158,171,149,173,145,179,141,170,124,168,121,173,112,168,105,158" shape="poly"> <area target="" data-text="Mexico Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="MEXICO" title="MEXICO" href="" coords="124,172,137,171,141,178,152,173,160,181,162,204,179,199,179,211,157,212,173,216,146,204,136,196,125,188" shape="poly"> <area target="" data-text="Japan Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="JAPAN" title="JAPAN" href="" coords="705,106,716,106,721,146,687,184,667,175" shape="poly"> <area target="" data-text="Germany Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="GERMANY" title="GERMANY" href="" coords="418,111,436,108,433,124,418,124" shape="poly"> <div class="tooltip" id="tooltip"></div> </map> </div>