Простые всплывающие подсказки на jQuery и CSS

Простые всплывающие подсказки на jQuery и CSS

HTML - Разметка

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

Code

<a href="#" class="tip_trigger">Your Link Key Word <span class="tip">This will show up in the tooltip</span></a>

CSS - Стили

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

Code

.tip {
  color: #fff;
  background:#1d1d1d;
  display:none; /*--Hides by default--*/
  padding:10px;
  position:absolute; z-index:1000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

Магия - jQuery

Первоначальный шаг - подключение JQuery файла

Вы можете скачать файл с сайта JQuery, или можете использовать этот, размещенный на Google.

Code

Сразу после строки, где вы подключили JQuery, откройте новый тег

Code

и начните свой код с помощью

Code

$(document).ready

Code

$(document).ready(function() {
  //Подсказки
  $(".tip_trigger").hover(function(){
  tip = $(this).find('.tip');
  tip.show(); //Показываем подсказку
  }, function() {
  tip.hide(); //Скрываем подсказку
  }).mousemove(function(e) {
  var mousex = e.pageX + 20; //Получаем X координату
  var mousey = e.pageY + 20; //Получаем Y координату
  var tipWidth = tip.width(); //Находим ширину подсказки
  var tipHeight = tip.height(); //Находим высоту подсказки

  //Расстояние от элемента до правого края окна просмотра
  var tipVisX = $(window).width() - (mousex + tipWidth);
  //Расстояние от элемента до нижней части окна
  var tipVisY = $(window).height() - (mousey + tipHeight);

  if ( tipVisX < 20 ) { //Если подсказка превышает координату Х области просмотра
  mousex = e.pageX - tipWidth - 20;
  } if ( tipVisY < 20 ) { //Если подсказка превышает координату Y области просмотра
  mousey = e.pageY - tipHeight - 20;
  }
  //Абсолютное положение подсказки в соответствии с положением курсора мыши
  tip.css({ top: mousey, left: mousex });
  });
});

Логика

1. Кэш расположения для селектора .tip.
Установить переменную tip и кэш расположения $(this).find('.tip'). Это кэширование расположения позволит избежать нескольких обработок DOM.
2. Hover In and Hover Out.
При попадании курсора мыши в зону триггера, показать .tip, при выводе курсора мыши из зоны триггера, скрыть .tip
3. Mouse Over.
Когда курсор мыши попадает в зону триггера, начинают отслеживаться X и Y координаты мыши с помощью e.pageX и e.pageY. Обратите внимание, мы добавляем 20px, чтобы задать небольшой прогал между указателем мыши и всплывающей подсказкой.
4. Установка переменных
Мы также примем во внимание те случаи, когда подсказка превышает X и Y координаты области просмотра. Когда это произойдет, мы хотим, чтобы положение подсказки перевернулось на другую сторону. Чтобы получить значения этой новой перевернутой позиции, мы должны получить высоту и ширину нашей подсказки ( tipWidth и tipHeight ). Чтобы определить, когда подсказка превысит область просмотра, мы должны вычесть X и Y координаты (координаты добавляются с шириной и высотой подсказки) от ширины и высоты окна.
5. Если подсказка превышает горизонтальную область просмотра.
Если подсказка превышает горизонтальную область просмотра, мы переворачиваем подсказку с левой стороны указателя мыши. Вычитая ширину подсказки, мы рассчитываем X координату мыши.
6. Если подсказка превышает вертикальную область просмотра.
Если подсказка превышает вертикальную область просмотра, мы переворачиваем подсказку вверх от указателя мыши. Вычитая высоту подсказки, мы рассчитываем Y координату мыши.
7. По умолчанию ...
Если подсказка не превышает вертикальной / горизонтальной области просмотра (по умолчанию), мы позиционируем подсказку в нижней правой части от курсора мыши. CSS вводится для регулировки левого и верхнего расположения курсора мыши.

Некоторые вещи для сведения:

Вы увидите, что есть два события в цепях в этой функции: .hover() и .mouseover() ,просмотрите документацию для обоих, если непонятны различия. Вы также заметите потом еще условия tipVisX < 20 и tipVisY < 20 . 20px используется потому, что принимаются 10px (сверху + снизу / слева + справа) отступы для всплывающей подсказки.

Источник
Перевод и описание: PS-Studio.Info

Ссылка:

BB-код:

HTML-код:

Ещё по теме:

Всего комментариев: 1