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

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

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

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

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

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

 

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

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

 

 

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

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

 

 

 

 

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