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 так легко, чтобы иметь многострочные подсказки для проекта, над которым я работаю.