Всплывающие подсказки на jquery

Jquery подсказка, появляющаяся при наведеннии мыши

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

В код страницы добавляем пустой элемент:

<divid="tooltip"></div>

Для этого элемента прописываем стиль.

#tooltip {   z-index:9999;   position: absolute;   display: none;   top:0px;   left:0px;   width:250px;   background-color:#fff;   padding:5px10px5px10px;   color:#000;   border:1px solid #888;   border-radius:5px;    box-shadow:01px2px#555;   box-sizing:;}

Добавляем элементы, при наведении на которые будет появляться подсказка.

<p><spandata-tooltip="Подсказка номер 1">Подсказка 1</span> | <spandata-tooltip="Подсказка номер 2">Подсказка 2</span></p>

И остается jquery скрипт.

$(function(){       $("[data-tooltip]").mousemove(function(eventObject){           $data_tooltip = $(this).attr("data-tooltip");           $("#tooltip").html($data_tooltip).css({"top": eventObject.pageY +5,"left": eventObject.pageX +5}).show();}).mouseout(function(){             $("#tooltip").hide().html("").css({"top":0,"left":0});});});
Код:
Код скопирован!
		<div id="tooltip"></div>

#tooltip {
  z-index: 9999;
  position: absolute;
  display: none;
  top:0px;
  left:0px;
  width: 250px;
  background-color: #fff;
  padding: 5px 10px 5px 10px;
  color: #000;
  border: 1px solid #888;
  border-radius: 5px; 
  box-shadow: 0 1px 2px #555;
  box-sizing: ;
}


<p><span data-tooltip="Подсказка номер 1">Подсказка 1</span> | <span data-tooltip="Подсказка номер 2">Подсказка 2</span></p>



$(function(){
      $("[data-tooltip]").mousemove(function (eventObject) {
          $data_tooltip = $(this).attr("data-tooltip");
          $("#tooltip").html($data_tooltip)
              .css({ 
                "top" : eventObject.pageY + 5,
                "left" : eventObject.pageX + 5
              })
              .show();
          }).mouseout(function () {
            $("#tooltip").hide()
              .html("")
              .css({
                  "top" : 0,
                  "left" : 0
              });
      });
});
		
12:07
63
RSS
Нет комментариев. Ваш будет первым!
Загрузка...