Всплывающие подсказки с графическими картами не работают на экранах ноутбуков

---

Я создал подсказку на основе JS, которая работает на графических картах. Однако проблема, с которой я сталкиваюсь, заключается в том, что он не работает на маленьких экранах ноутбуков или если окно браузера свернуто.

Что я уже пробовал:

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); }
}());

---