В бумажных книгах около мест, требующих пояснений, стоят цифры, а внизу страницы около цифр идут соответствующие пояснения. У таких пояснений есть свое название - сноски. Иногда их выносят в конец текста, как например в случаях со списком используемой литературы в рефератах и диссертациях. Где бы их ни размещали, сноски всегда отделены от основного текста в бумажных книжках.

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

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

Для реализации всплывающих подсказок существует довольно много мелких решений. Но так как практически во всех сайтах я использую Bootstrap, я опишу как я реализую сноски на странице с использованием возможностей именно Bootstrap.

Мои требования к реализации сносок:

1. Автоматическая нумерация сносок (реализуется с помощью счетчиков CSS);
2. Возможность использования HTML-тэгов в сносках (настраивается с помощью JavaScript);
3. Удобство отображения сносок при непроизвольных движениях мышкой (реализовано в Bootstrap).

 

Реализации автонумерации сносок

Проставлять номера вручную – это не прогрессивный метод. Современные средства CSS позволяют пройтись по всем сноскам и присвоить им номера автоматически.

body {
  counter-reset: notecounter;
}

span.note:before {
  counter-increment: notecounter;
  content: counter(notecounter);
  position: relative;
  top: -0.4em;
}

span.note {
  color: #24B1E6;
}

 

Свойство counter-reset создает CSS счетчик notecounter для страницы внутри тэга body и присваивает ему начальное значение равное 0.

counter-increment: notecounter увеличивает значение на 1 для каждого найденного элемента с классом .note

content: counter(footnotecounter) добавляет номер для сноски перед содержимым тэга span

 

Пример записи тэга для сноски:

<span class='note'></span>

 

Как уже писал выше, механизм всплывающих подсказок достойно реализован в Bootstrap, потому я использую именно его. Чтобы Bootstrap понял, что ему нужно обработать тэг как подсказку, в тэг span нужно добавить атрибут data-toggle="tooltip":

<span class='note' data-toggle="tooltip" 
title="Эта сноска реализована с помощью Bootstrap"></span>

 

Заключительный шаг перед тем, как все заработает – добавить JS на страницу :
 

jQuery(document).ready(function() {
   jQuery('[data-toggle="tooltip"]').tooltip()
});

 

Если хотите добавлять HTML тэги в сноски, то тогда JS надо изменить на такой:

jQuery(document).ready(function() {
   jQuery('[data-toggle="tooltip"]').tooltip({html:true})
});

 

Если html-тэги хотите добавить только в одной сноске, то можно добавить в тэг span атрибут data-html="true"

<span class='note' data-toggle="tooltip" 
data-html="true" title="Эта сноска реализована с помощью <a href="#">Bootstrap</a>"></span>

 

Настройка видимости

По умолчанию, всплывающие подсказки при уводе курсора мыши в сторону быстро пропадают. Например, если вы в подсказку вставите гиперссылку, то нажать на нее не сможете. Чтобы защитить подсказки от пропадания с экрана при движении мышкой, нужно добавить немного отличный JS код с указанием задержки.

 

jQuery(document).ready(function () {
  jQuery('[data-toggle="tooltip"]').each(function () {
    var $elem = jQuery(this);
       $elem.tooltip({
         html: true,
         container: $elem,
         delay: { hide: 400 }
       });
   });
});

 

 

Особенности использования в WordPress

WordPress по умолчанию преобразует двойные кавычки в так называемые "умные кавычки", заменяет знак - на ‐. Поэтому, чтобы обезопасить себя от умностей WordPress, рекомендую добавить такие строчки в код файла functions.php вашей темы.

add_filter( 'no_texturize_tags', 'my_no_texturize_tags' );
function my_no_texturize_tags( $tags ) {
  $tags[] = 'span';
  return $tags;
}

 

 

 

 

---------
согласитесь, что не очень удобно прокручивать страницу, чтобы посмотреть сноску