ImageMapster: How to make the tooltip follow the mouse -
i wondering if there way make tooltip not appear @ corner of area, instead above wherever mouse is. need "follow" mouse while it's active.
if has sample code doing thankful.
for each area add unique id, check mouseenter or mouseover area , mouse position , reposition tooltip:
<map id="map" name="map"><area id="area1" shape="poly" name="area1" alt="" coords="607,320, 620,321,....... var xoffset; var yoffset; $('#map_container').mapster( { fillopacity: 0.2, fillcolor: "ffffff", stroke: true, strokecolor: "ffcb0b", strokeopacity: 0.8, strokewidth: 6, singleselect: true, mapkey: 'name', listkey: 'name', showtooltip: true, onclick: function (e) { // }, tooltipclose: ["area-click", "area-mouseout"], staticstate: true, onshowtooltip: function (e) { var key_name = e.key; //here call unique id mouseenter or mouseover $("#"+key_name).on("mouseenter", function (data) { xoffset = data.pagex; yoffset = data.pagey; console.log("xoffset " + xoffset + " & " + "yoffset " + yoffset); //tooltip class name given imagemapster , change new position $(".mapster_tooltip").css("left", xoffset + 10); $(".mapster_tooltip").css("top", yoffset); }); } });
Comments
Post a Comment