टूलटिप को केवल तभी दिखाया जाए जब एक क्षेत्र jvectorMap में क्लिक किया गया हो, और इसे खोलने दें?

Question

मैं इस jVectorMap का उपयोग कर रहा हूं। डिफ़ॉल्ट रूप से, यह होवर पर टूलटिप दिखाता है। । केवल क्लिक पर (आंशिक रूप से काम कर रहा है, लेकिन टूलटिप होना चाहिए माउस कर्सर ऊपर होना मैं समझ नहीं सकता कैसे प्राप्त करने के लिए

1. टूलटिप दर्शाएं -

   यहाँ है कि मैं क्या हासिल करने के लिए कोशिश कर रहा हूँ है माउस कर्सर स्थिति।)

2. टूलटिप तब तक खुलता है जब तक कि उपयोगकर्ता स्पष्ट रूप से पर पर क्लिक करता है।

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

इच्छा व्यवहार

Answer 1

मैं जिस तरह से आप चाहते हैं काम कर समझ में आ गया और अपने बेला अद्यतन: http://jsfiddle.net/inanda/ufhz316z/5/

जावास्क्रिप्ट

$('#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; 

}); 

एचटीएमएल

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

सीएसएस

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

Answer 2

आप को भरने या स्ट्रोक मानकों के माध्यम से चयनित क्षेत्र हाइलाइट कर सकते हैं। JvectorMap के प्रलेखन में अधिक जानकारी मिल सकती है। यहां एक संक्षिप्त उदाहरण:

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