javascript - 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
}

顺便说一句，感谢您提出这个堆栈溢出问题。没有它，我将无法如此轻松地自定义 jqvmap 工具提示上的工具提示，以便在我正在处理的项目中使用多行工具提示。