How to show a tooltip only if an area is clicked in jVectorMap and allow it to open?

Question

I am using this jVectorMap . By default, it displays a hover hint.

Here is what I'm trying to achieve -

• Show tooltip only when pressed (partially works, but the tooltip should be higher than the mouse cursor. I could not figure out how to get the mouse cursor position.)
• Show a tooltip until the user explicitly clicks on close .

Code: jsfiddle

$('#map').vectorMap({ map: "us_aea_en", backgroundColor: "transparent", regionStyle: { initial: { fill: "#818486" } }, onRegionClick: function (e, code) { var map = $('#map').vectorMap('get', 'mapObject'); map.tip.show(); map.tip.html(code + "<p>Click to Close</p>"); }, onRegionTipShow: function (e, tip, code) { e.preventDefault(); } }); 

A wish

Answer 1

I started working the way you want and updated your fiddle: http://jsfiddle.net/inanda/ufhz316z/5/

Javascript

  $('#map').vectorMap({ map: "us_aea_en", backgroundColor: "transparent", regionsSelectable: true, regionsSelectableOne: true, regionStyle: { initial: { fill: "#818486" }, selected: { fill: "#C0C0C0" } }, onRegionClick: function (e, code) { var map = $('#map').vectorMap('get', 'mapObject'); var customTip=$('#customTip'); customTip.css({ left: left, top: top }) customTip.html(map.tip.text()); customTip.show(); customTip.append(code + "<p>Click to Close</p>"); customTip.children("p").click(function(){ map.clearSelectedRegions(); customTip.hide(); }) }, onRegionTipShow: function (e, tip, code) { e.preventDefault(); } }); var left,top; $('#map').vectorMap('get', 'mapObject').container.mousemove(function(e){ left = e.pageX - 40; top = e.pageY - 60; }); 

HTML

 <div id="map"></div> <div id="x"></div> <div id="y"></div> <div id="customTip" class="jvectormap-tip"></div> 

CSS

 #map { width: 500px; height: 400px; } 

Answer 2

You can select the selected area using the fill or stroke options. See the jVectorMap documentation for more details. Here is a quick example:

 regionStyle: { selected: { stroke: '#000', "stroke-width": 1.3, "stroke-opacity": 1 } },