Всплывающая подсказка

Всплывающая подсказка появляется прямо в строке, нет необходимости делать сноски для прокрутки страницы вниз. На этой странице способы применения популярных библиотек JavaScript для показа всплывающей подсказки.

Оглавление:
  1. Всплывающая подсказка jQuery
  2. Всплывающая подсказка BootStrap
  3. Всплывающая подсказка Semantic UI
  4. Всплывающая подсказка JavaScript

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Россия, Республика Крым, Белогорский район, с. Зуя
http://samartsy.ru/

Всплывающая подсказка jQuery

jQuery UI покажет содержание атрибута title, это означает что не нужно создавать атрибут data-tooltip с текстом для подсказки.

<head>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://yastatic.net/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

Функция tooltip(); для вызова всплывающей подсказки.

$( function() {
   $( document ).tooltip();
});

Демо
Следующий способ показать всплывающею подсказку — без функции tooltip();

<head>
   <script src="https://yastatic.net/jquery/3.1.1/jquery.min.js"></script>
</head>
$(window).on('load', function() {
// Подсказка только для текста атрибута title
$('.jtooltip').hover(function(){
        // наведение курсора
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // убранный курсор
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; // получить координаты курсора по оси x
        var mousey = e.pageY + 10; // получить координаты курсора по оси y
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});
});

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

.tooltip {
  display:none; /* скрыть подсказку до наведения курсора */
  position:absolute; /* позиция подсказки */
  box-shadow: 0 0 3px #333; /* тень окна подсказки */
  border-radius: 5px; /* закруглить углы окна */
  background: #FFF8DC; /* цвет фона окна */
  padding: 10px; /* внутренний отступ окна */
  font-size: 12px Arial; /* размет и шрифт текста в окне */
}
.text {
  border-bottom: 1px dotted #333; /* граница для текста в содержании */
}
.text:hover {
  cursor: help; /* иконка при наведении курсора на текст в содержании */
}

Демо

К началу

Всплывающая подсказка BootStrap

Библиотека BootStrap tooltip использует атрибуты data-* как селектор для показа всплывающей подсказки. Текст для подсказки содержание атрибута title.

<head>
  <link rel="stylesheet" href="https://yastatic.net/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://yastatic.net/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
  • data-toggle="tooltip" — селектор для показа окна вплывающей подсказки.
  • data-placement — указатель, с какой стороны показать подсказку.
  • data-placement="top" — подсказка вверху.
  • data-placement="bottom" — подсказка внизу.
  • data-placement="left" — подсказка слева.
  • data-placement="right" — подсказка справа.

HTML

<ul class="list-inline">
    <li><a href="#" data-toggle="tooltip" data-placement="top" title="Вверху">Вверху</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Внизу">Внизу</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="left" title="Слева">Слева</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="right" title="Справа">Справа</a></li>
</ul>

Для вызова подсказки применяется селектор + функция tooltip();

$(window).on('load', function() {
    $('[data-toggle="tooltip"]').tooltip();   
});

Демо

К началу

Всплывающая подсказка Semantic UI

Библиотека Semantic UI альтернатива BootStrap. Всплывающая подсказка Semantic UI работает без jQuery.

  • data-tooltip — текст для всплывающей подсказки.
  • data-position — отображение подсказки с указателем.
<ul style="display: inline-block;"> 
    <li data-tooltip="Вверху слева" data-position="top left">Вверху слева</li>
    <li data-tooltip="Вверху по центру" data-position="top center">Вверху по центру</li>
    <li data-tooltip="Вверху справа" data-position="top right">Вверху справа</li>
    <li data-tooltip="Внизу слева" data-position="bottom left">Внизу слева</li>
    <li data-tooltip="Внизу по центру" data-position="bottom center">Внизу по центру</li>
    <li data-tooltip="Внизу справа" data-position="bottom right">Внизу справа</li>
    <li data-tooltip="Справа по центру" data-position="right center">Справа по центру</li>
    <li data-tooltip="Слева по центру" data-position="left center">Слева по центру</li>
</ul>

Демо

К началу

Всплывающая подсказка JavaScript

Используя событие onmouseover, можно сделать всплывающею подсказку на JavaScript Menucool. Например, всплывающая подсказка с изображением.

Всплывающая подсказка на JavaScript с изображением
Всплывающая подсказка Menucool

Настройки по умолчанию

var tooltipOptions= 
{
showDelay: 150,
hideDelay: 300,
effect: "slide",
duration: 200,
relativeTo: "element",
position: 1,
smartPosition: false,
offsetX: 0,
offsetY: 0,
maxWidth: 400,
calloutSize: 9,
calloutPosition: 0.3,
cssClass: "",
sticky: false,
overlay: false,
license: "mylicense"
};

Синтаксис

tooltip.pop(targetElement, '#contentElementId' [, options])

HTML

<span class="tooltip" onmouseover="tooltip.pop(this, '#img_tip', {position:0, cssClass:'no-padding'})">
    Подсказка Menucool
</span>
<div style="display:none;">
    <span id="img_tip">
      <img src="tooltip/img/trump.jpg" />
        <h3>Всплывающея подсказка</h3>
        Всплывающея подсказка на JavaScript с изображением
    </span>
</div>

Отображение окна всплывающей подсказки контралируется в HTML в фигурных скобках. Например, убрать бордюр {position:0, cssClass:'no-padding'}, добавить бордюр {position:0, cssClass:'padding'}. Это не всё, там много еще есть возможностей. Лицензия скрипта Menucool $20.00.