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上的工具提示上自定义工具提示，因此很容易在我正在处理的项目上使用多行工具提示。

jqVmap静态工具提示

1 个答案: