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

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

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

Всплывающая подсказка 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.