Как заставить tooltip не убираться при наведении на него?

Question

[YraganTron]

Делаю вручную tooltip, хотелось бы иметь возможность наводить на саму всплывающую подсказку мышь, чтобы она не убиралась. Вот мой код

$('.link-reply').mouseover(function () {
        var tooltip = $(this).data('num');
        var some_link_reply = $(this);
        $.ajax({
            type: 'GET',
            dataType: 'json',
            data: {
                'tooltip': tooltip,
            },
            url: '/AjaxTooltip.json',
            success: function (data) {
                console.log(data);
                parse_datetime(data, 0);
                var tmpl = _.template(document.getElementById('template-tooltip').innerHTML);
                var result = tmpl({data: data});
                $('.dynamic1').append(result);
                $('.tooltip').css({left: some_link_reply.offset().left + 15 , top: some_link_reply.offset().top + 15, opacity: 1});
            }
        });
    });
    $('.link-reply').mouseout(function () {
            $('.tooltip').remove()
    })

Comments

[Дмитрий Гавриленко]

разметка какая?

[YraganTron]

Дмитрий Гавриленко: ideone.com/zKeif8 вот моя html разметка, там немного django, но в целом должно быть понятно. https://jsfiddle.net/dhgswe03/1/ вот js + css

[Дмитрий Гавриленко]

YraganTron: откройте страницу в браузере, и скопируйте код HTML от туда. Просто следы шаблонизатора, вероятней всего, не дают нормально отработать скрипту. На что не наводил, подсказка не появилась.

[YraganTron]

Дмитрий Гавриленко: в jsfiidle она и не появится т.к. я данные аяксом со своего сервака тяну для вывода подсказки

[Дмитрий Гавриленко]

YraganTron: все равно уберите лишнее, как бы не очень охота тратить время на парсинг этого фарша, так еще и глазами, а уж тем более руками.

[YraganTron]

Дмитрий Гавриленко: Не знаю что лишнее, а что нет. ideone.com/fzBxgH Вот тут я скидываю кусок кода с чем взаимодействует скрипт. Есть большой див dymanic1 в котором много дивов контейнеров. При наведении на .link-reply у меня в самом низу dynamic1 рисуется через шаблонизатор новый див, как подсказка. Css я кидал выше, скрипт тоже

Answer 1

[Григорий Васильков]

Все проще.

.b-bullet {
  /* стили кружочка со знаком вопроса */
}
.b-bullet:hover .b-bullet__pad,
.b-bullet:focus .b-bullet__pad {
  visibility: visible;
}
.b-bullet__pad {
  visibility: hidden;
  position: absolute;
  top: 100%
  left: 50%;
  margin-left: -100px;
  width 200px;
  height: 0;
}
.b-bullet__tooltip {
  /* стили подсказки */
}

В HTML (EMMET code):
.b-bullet>.b-bullet__pad>.b-bullet__tooltip

Если хотите, чтобы между иконкой и подсказкой было место например для треугольничка - просто добавьте padding-top в элемент b-bullet__pad, таким образом вы создадите невидимое пространство, двигаясь по которому, система будет считать, что вы все еще в :hover, и не будет закрывать подсказку.