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