Теги переполнения стека - Как они отображают информацию при наведении мыши?

Question

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

Как мне добиться этого с помощью JQuery или JS?Пожалуйста, объясните процесс получения информации о тегах с сервера.

update:

Важно то, что трудно поверить, что это подсказка.Поскольку всплывающая подсказка обычно исчезает, когда тег теряет указатель мыши с его поверхности.Но что касается всплывающих подсказок Stack Overflow, они остаются неподвижными, даже если указатель мыши перемещается над информационной областью.Вот почему я поднял этот вопрос, чтобы уточнить об этом.Как выполняется этот тип настройки?

Answer 1

Посмотрите на некоторые плагины всплывающей подсказки для jQuery. Что касается получения HTML-кода для всплывающей подсказки, просто посмотрите на несколько простых $.ajax примеров в документации jQuery.

---

Всплывающие

• 30 Стильные плагины jQuery Tooltip для броских дизайнов
• 10 отличных плагинов всплывающей подсказки с jQuery

Answer 2

Не будучи более конкретным, я могу дать вам общее представление о том, как это работает.

При наведении курсора будет запускаться запрос AJAX (возможно, после короткого обратного отсчета таймера, чтобы он продолжал срабатывать до тех пор, пока указатель не будет находиться над тегом в течение короткого времени), который запрашивает базу данных SO о данном теге. If возвращает какой-либо ответ, либо HTML-фрагмент, который вводится непосредственно в DOM, либо кодированный в XML или JSON блок данных, который используется для заполнения элемента, который вводится в DOM. Событие mouseout удалит элемент из DOM. Я полагаю, что ответ AJAX также хранится в кеше памяти javascript, который управляет им, чтобы одни и те же данные не запрашивались повторно.

Answer 3

Добавьте прослушиватель событий для события DOM при наведении курсора, чтобы отобразить информационное окно. Добавьте прослушиватель событий к событию mouseout, чтобы скрыть информационное окно. Смотрите Типы событий мыши для подробностей. Получите информацию, которую вы хотите отобразить в информационном окне, с помощью XMLHttpRequest .

Answer 4

Я бы порекомендовал Подсказка для чего-то подобного.