Как создавать всплывающие подсказки с помощью jQuery

Как создать всплывающую подсказку с помощью jQuery

Вот простая идея создать сообщение всплывающей подсказки с помощью jQuery.

Идея ...

Определите «target», которые должны отображать всплывающие подсказки.
Создайте сообщение всплывающей подсказки и стиль CSS для него.
Три функции, -showTooltips,hideTooltips,changeTooltipsPosition.
Удерживая указатель мыши в поле «target», используйтеshowTooltips для отображения всплывающих подсказок и начните позицию сchangeTooltipsPosition.
Пока мышь перемещается вокруг «target», продолжайте изменять положение всплывающих подсказок с помощьюchangeTooltipsPosition.
В то время как указатель мыши оставляет «цель», используйте hideTooltips, чтобы скрыть сообщение всплывающей подсказки.
Используйте jQuery, чтобы сделать это :)

1. цель

«Подсказка» и «метка имени пользователя» являются целью, чтобы показать сообщение всплывающей подсказки.

Username : 
hint (mouseover me)

2. Подсказки CSS

Создайте стиль CSS для сообщения всплывающей подсказки.

.tooltip{
    margin:8px;
    padding:8px;
    border:1px solid blue;
    background-color:yellow;
    position: absolute;
    z-index: 2;
}

3. Показать подсказки

Добавьте сообщение всплывающей подсказки к тегу «body» и начальную позицию сообщения всплывающей подсказки.

var showTooltip = function(event) {
   $('div.tooltip').remove();
   $('I\' am tooltips! tooltips! tooltips! :)')
     .appendTo('body');
   changeTooltipPosition(event);
};

5. Изменить подсказки

Изменить положение сообщения всплывающей подсказки.

var changeTooltipPosition = function(event) {
    var tooltipX = event.pageX - 8;
    var tooltipY = event.pageY + 8;
    $('div.tooltip').css({top: tooltipY, left: tooltipX});
};

6. Скрыть подсказки

Скрыть сообщение всплывающей подсказки.

var hideTooltip = function() {
    $('div.tooltip').remove();
};

7. Связать

Привязать события мыши к цели.

$("span#hint,label#username'").bind({
    mousemove : changeTooltipPosition,
    mouseenter : showTooltip,
    mouseleave: hideTooltip
});

Попробуй сам

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












jQuery tooltips example

Username : 
hint (mouseover me)

Попробуйте демо

TOC