Click here to Skip to main content
14,271,889 members
Rate this:
Please Sign up or sign in to vote.
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
#tooltip {
 background: #607D8B;
 color:#ffffff;
 border: 1px solid #009688;
 padding: 3px 10px;
 z-index:9999;
}


JS
(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
Gerry Schmitz 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, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100