jqVmap靜態工具提示

Question

所以我知道如何使用jqvmap的文檔進行自定義工具提示，但我試圖尋找一種方法，我可以將鼠標懸停在某個區域上，並且工具提示保持其懸停狀態，只要我處於地區。當我移動鼠標時不移動。

僅供參考這裏是jqVmap的網站：http://jqvmap.com/

的想法是我想每個國家都有一個按鈕，我可以點擊去它的頁面，但提示會轉移你與區域和我謹想阻止它這樣做。

有什麼建議嗎？

你可以看到在這個網站的例子：（非工作示例以及爲什麼它是一個問題）：http://111project.org.s159009.gridserver.com/

我基本上可以控制一切，但提示的位置和運動。

在此先感謝。

Answer 1

如果你看http://111project.org/wp-content/themes/111/js/main.js你會發現觸發該框的代碼。

onRegionOver: function (event, code, region) { 
     var state_abbr = code; 
     var state = $(region); 
     var id = '#jqvmap1_' + state_abbr; 
     var offset = $(id).offset(); 
     var left_offset = offset.left; 
     var top_offset = offset.top; 
     console.log(left_offset); 

     // if (code == 'ok' || code == 'fl' || code == 'ga') { 
     if (code == 'ok' || code == 'ga' || code == 'fl') { 

      $('#state_tooltip').css({ 
      'left': left_offset - 120, 
      'top': top_offset - 100, 
      'position': 'absolute', 
      'display': 'block', 
      'opacity': 1 
      }); 

      var new_url = region.toLowerCase().replace(/\s/g, '-'); 

      $('#state_tooltip h5').text(region); 

      $('#state_tooltip .button').attr('href', new_url); 

      if (code == 'ok') { 
      $('#state_tooltip p').html('115 commited <br> Families'); 
      } 

      if (code == 'ga') { 
      $('#state_tooltip p').html('20 commited <br> Families'); 
      } 

      if (code == 'fl') { 
      $('#state_tooltip p').html('24 commited <br> Families'); 
      } 

     } 


    }, 
    onRegionOut: function (element, code, region) { 
     console.log('out'); 
     $('#state_tooltip h5').text(); 
    } 

然後，您可以在HTML代碼複製的#state_tooltip

<div id="state_tooltip" style="display: none;"> 
<h5></h5> 
<p>20 Committed <br> Families</p> 
<a class="button" href="">Learn More</a> 

你可以找到在CSS文件#state_tooltip的CSS。 http://111project.org/wp-content/themes/111/style.css

#state_tooltip { 
    text - align: left; 
    - webkit - border - radius: 5px; 
    - moz - border - radius: 5px; 
    - ms - border - radius: 5px; 
    - o - border - radius: 5px; 
    border - radius: 5px; 
    background: #f9f9f9; 
    color: #1293b9; 
    font-size:smaller; 
    padding:10px; 
    -webkit-transition:all ease-in-out, 1s; 
    -moz-transition:all ease-in-out, 1s; 
    -o-transition:all ease-in-out, 1s; 
    transition:all ease-in-out, 1s; 
    opacity:0 
} 
#state_tooltip h5 { 
    color: #0c5165; 
    font-size:1.375em; 
    font-weight:normal 
} 
#state_tooltip.button { 
    font - size: 0.9375em; 
    padding: 5px 10px 
} 

BTW感謝您使這個堆棧溢出問題。如果沒有它，我將無法自定義jqvmap上工具提示上的工具提示，因此很容易在我正在處理的項目上使用多行工具提示。