Предоставленный JavaScript код, написанный на jQuery, создает простую систему всплывающих подсказок. Когда пользователь наводит курсор мыши на элемент, у которого есть атрибут title, появляется небольшое всплывающее окно (tooltip) с текстом из этого атрибута. Это окно динамически следует за движением мыши и исчезает, когда курсор покидает элемент.

Код
<script>
//My tooltip htmlstart.ucoz.net
$(document).ready(function() {
  var tooltip
  $('[title]').on('mouseenter', function() {
  var title = $(this).attr('title');
  $(this).data('tooltip', title).removeAttr('title');

  tooltip = $('<div class="tooltip"></div>')
  .text(title)
  .appendTo('body')
  .css({
  position: 'absolute',
  top: $(this).offset().top - $(this).height() - 0,
  left: $(this).offset().left + $(this).width() / -2,
  });
  }).on('mousemove', function(event) {
  tooltip.css({
  top: event.pageY - tooltip.outerHeight() - 2,
  left: event.pageX - tooltip.outerWidth() / - 10
  });
  }).on('mouseleave', function() {
  $(this).attr('title', $(this).data('tooltip'));
  tooltip.remove();
  });
});</script>


в ваш в CSS файл записываем данные строки

Код
.tooltip {
  position: absolute;
z-index: 9999;
max-width:200px;
  padding: 5px 8px;
  background: rgba(60,60,60,0.7);
  font: 12px/11px Calibri, Arial, Helvetica, sans-serif;
  color: #fff;
  font-style: italic;
  line-height: 14px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.tooltip:before {
  content: '';
  position: absolute;
  bottom: 33%;
  border: 5px solid;
  border-color: transparent #0000008a transparent transparent;
  left: -10px;
}


Этот код является отличным примером того, как с помощью jQuery можно создавать интерактивные элементы на веб-страницах.

и на этом пожалуй всё. и не забываем говорить спасибо)

Комментарии

Минимальная длина комментария - 50 знаков. комментарии модерируются
HTMLSTART » CSS3 - JS - SVG Примеры » Прочие скрипты для сайтов » JavaScript код для создания всплывающих подсказок