Создание hovercard / tooltip

Question

Я пытаюсь создать ховеркарту для проекта в социальной сети.Идея состоит в том, что когда вы наводите курсор на имя какого-либо пользователя, появится HC, содержащий дополнительную информацию об этом пользователе.Когда вы уберете мышь, она исчезнет через 2 секунды.

Вот мой код.Во-первых, у меня есть пустой div с классом hov, который будет содержать информацию.

<div class="hov">

</div>

Вот мой скрипт jquery:

$(function(){

    $('body').on('mouseenter', 'a', function(){

        let username = $(this).attr('href');
        let quotesname = JSON.stringify(username);
        let name = JSON.parse(quotesname)

        // on the live site this span is populated by an Ajax call
        data = "foo";
        $(".hov").html("<span>" + data + "</span>");

        $(this).focus().addClass('hov');

    }).on('mouseleave', 'a', function(){

        setTimeout(function(){

            $(".hov").hide();

        }, 2000);                           
    });
});

(все вышеперечисленное находится вфайл заголовка, который включен во все остальные файлы)

И, наконец, вот CSS:

.hov {

  position: relative;

 }

.hov span {

  display: none; 
  height: 150px;
  width: 250px;
  white-space: nowrap;
}

.hov:focus span {

  display:block;
  position:absolute;
  padding: 0.2em 0.6em;
  border:1px solid #996633;
  border-radius: 5px;
  background-color: grey !important;
  color:#fff;
  z-index: 100;
}

Моя идея состояла в том, чтобы обнаружить использование jquery, когда кто-то наводит курсор на ссылку.Затем он извлечет часть href и отправит ее в файл ответов php, который проверит, соответствует ли часть href любому из имен пользователей в базе данных.Если это произойдет, он отправит информацию об этом пользователе, которая будет отображаться в HC (если ссылка содержит имя пользователя, это всегда ссылка на профиль этого пользователя).Если этого не произойдет, ничего не будет отправлено, и тогда HC не будет отображаться (поэтому я использовал условие if(data) внутри части ajax).Мне удалось заставить HC появляться, когда вы наводите курсор на имя пользователя, вместе с информацией, отправленной из файла ответов php;однако я сталкиваюсь с двумя проблемами, которые не могу решить, как бы я ни старался.

1) Когда я удаляю мышь из ссылки, HC исчезает, но и ссылка, над которой я завис (нет)Неважно, если это текст, изображение .. что бы это ни было, оно ушло).Я попробовал все виды вещей в части mouseleave (определить, находится ли div в фокусе, удалить или отсоединить div, удалить класс, удалить атрибут класса из hov и т. Д.), Но безрезультатно.Вот почему у меня есть эта строка $(".hov").hide();, это лучшее, что я мог получить до сих пор.Я подозреваю, что у него есть что-то с полным удалением класса hov, когда вы убираете мышь, я действительно не могу сказать.

2) Я не уверен, как применять только стиль hovкогда я наведите курсор на ссылку на профиль пользователя, а не на какую-то случайную ссылку.Я создал вызов ajax именно для этой цели, чтобы увидеть, является ли ссылка на пользователя или нет, но я не уверен, что и как я могу использовать ту же логику для решения этой проблемы.

Любая помощь будетБуду очень признателен,

Спасибо!

Answer 1

Когда я удаляю мышь из ссылки, HC исчезает, но также и ссылка, над которой я находился

Ваш прослушиватель событий ищет mouseenter для элемента a.Внутри этого слушателя вы запускаете этот код:

$(this).focus().addClass('hov');

, который дает элементу a (this) класс hov.Затем в коде указателя мыши вы говорите следующее:

$(".hov").hide();

Поэтому вы скрываете элемент a.

Я не уверен, как применитьСтилизация hov только тогда, когда я наведите курсор на ссылку на профиль пользователя, а не на какую-то случайную ссылку

Используйте отдельный класс для ссылки, а затем задайте стиль для этого класса.

---

Попробуйте что-то вроде этого (см. Встроенные комментарии):

$(function(){
    // apply the event listener directly to the element
    // note we've given the element a class
    $('a.student')
    .on('mouseenter', function(){
        data = "foo";
        // you have to show the tooltip element
        $(".hov").html("<span>" + data + "</span>").show();
    })
    .on('mouseleave', function(){
        setTimeout(function(){
            // hide the tooltip element after a couple of seconds
            $(".hov").hide();
        }, 2000);                           
    });
});

.hov {
  /* ensure this is hidden at startup */
  display: none;
  position: relative;
 }

.hov span {
  height: 150px;
  width: 250px;
  white-space: nowrap;
  /* if the parent div is hidden, so is this, no need to set display property on it */
  display:block;
  position:absolute;
  padding: 0.2em 0.6em;
  border:1px solid #996633;
  border-radius: 5px;
  background-color: grey !important;
  color:#fff;
  z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hov">

</div>

<p>
    <a class="student">A link!</a>
</p>