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上工具提示上的工具提示，从而在我正在进行的项目中拥有多行工具提示。