Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have created a JS-based tooltip that works on image maps. The problem I am having though is that it does not work on small laptop screens or if the browser window is minimized.

What I have tried:

Here is a codepen sample, https://codepen.io/ArshRai/pen/LwRGvZ

HTML
<pre lang="HTML"><img src="http://lorempixel.com/output/food-q-c-350-350-5.jpg" usemap="#foodmap">
<map id="#foodmap" name="foodmap">
  <area class="area" shape="rect" coords="0,0,170,100" href="#" target="_self" title="Lorem ipsum dolor sit amet, <br> sea no laoreet noluisse suavitate, mei melius laoreet ne. Id modus dicta neglegentur pro.  Prima delicatissimi ex sed, est in iriure epicurei consequuntur. Ne malis nulla luptatum vis. Vim quodsi lucilius intellegam no." />

  <area class="area" shape="rect" coords="187,0,342,188" href="#" target="_self" title="Carrot" />

  <area class="area" shape="rect" coords="169,182,350,350" href="#" target="_self" title="Cucumber" />

  <area class="area" shape="poly" coords="78,133,158,182,162,349,0,349,0,283" href="#" target="_self" title="Red Pepper"/>
</map>


CSS
CSS
#tooltip {
 background: #607D8B;
 color:#ffffff;
 border: 1px solid #009688;
 padding: 3px 10px;
 z-index:9999;
}


JS
JavaScript
(function () {
  var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
  DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
  showAt = function (e) {
   var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
   $("#" + ID).html($(e.target).data(DATA)).css({
   position: "absolute", top: ntop, left: nleft
    }).show();
  };
   $(document).on("mouseenter", "*[title]", function (e) {
    $(this).data(DATA, $(this).attr("title"));
    $(this).removeAttr("area[title]").addClass(CLS_ON);
    $("<div id='" + ID + "' />").appendTo("body");
    showAt(e);
    });
    $(document).on("mouseleave", "." + CLS_ON, function (e) {
     $(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
     $("#" + ID).remove();
    });
    if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
Posted
Comments
[no name] 13-Aug-19 15:19pm    
Probably has to do with the size / availability of the "hit areas". Gets "smaller" when scaled to the smaller screen; (maybe) disappears altogether when the browser is minimized. (How does one "mouse" content that is "minimized"?)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900