Реализация сносок и всплывающих подсказок с помощью Bootstrap

В бумажных книгах около мест, требующих пояснений, стоят цифры, а внизу страницы около цифр идут соответствующие пояснения. У таких пояснений есть свое название - сноски. Иногда их выносят в конец текста, как например в случаях со списком используемой литературы в рефератах и диссертациях. Где бы их ни размещали, сноски всегда отделены от основного текста в бумажных книжках.
Электронные издания немного отличаются от бумажных. В электронных статьях тоже можно использовать сноски, при клике на которые страница прокрутится к области сносок Перейти. Но согласитесь, что одно дело посмотреть вниз бумажной страницы, а другое дело постоянно крутить страницу вверх-вниз.
Реализация сносок с помощью прокручивания страниц имеет право на жизнь, но лично мне больше нравится другой способ - показывать текст сноски при наведении (для тех, кто с мобильных устройств – при клике) .
Для реализации всплывающих подсказок существует довольно много мелких решений. Но так как практически во всех сайтах я использую Bootstrap, я опишу как я реализую сноски на странице с использованием возможностей именно Bootstrap.
Мои требования к реализации сносок:
- Автоматическая нумерация сносок (реализуется с помощью счетчиков CSS);
- Возможность использования HTML-тэгов в сносках (настраивается с помощью JavaScript);
- Удобство отображения сносок при непроизвольных движениях мышкой (реализовано в Bootstrap).
Реализации автонумерации сносок
Проставлять номера вручную – это не прогрессивный метод. Современные средства CSS позволяют пройтись по всем сноскам и присвоить им номера автоматически.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
Пример записи тэга для сноски:
1 |
<span class='note'></span> |
Как уже писал выше, механизм всплывающих подсказок достойно реализован в Bootstrap, потому я использую именно его. Чтобы Bootstrap понял, что ему нужно обработать тэг как подсказку, в тэг span нужно добавить атрибут data-toggle="tooltip":
1 2 |
<span class='note' data-toggle="tooltip" title="Эта сноска реализована с помощью Bootstrap"></span> |
Заключительный шаг перед тем, как все заработает – добавить JS на страницу :
1 2 3 |
jQuery(document).ready(function() { jQuery('[data-toggle="tooltip"]').tooltip() }); |
Если хотите добавлять HTML тэги в сноски, то тогда JS надо изменить на такой:
1 2 3 |
jQuery(document).ready(function() { jQuery('[data-toggle="tooltip"]').tooltip({html:true}) }); |
Если html-тэги хотите добавить только в одной сноске, то можно добавить в тэг span атрибут data-html="true"
1 2 |
<span class='note' data-toggle="tooltip" data-html="true" title="Эта сноска реализована с помощью <a href="#">Bootstrap</a>"></span> |
Настройка видимости
По умолчанию, всплывающие подсказки при уводе курсора мыши в сторону быстро пропадают. Например, если вы в подсказку вставите гиперссылку, то нажать на нее не сможете. Чтобы защитить подсказки от пропадания с экрана при движении мышкой, нужно добавить немного отличный JS код с указанием задержки.
1 2 3 4 5 6 7 8 9 10 |
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 вашей темы.
1 2 3 4 5 |
add_filter( 'no_texturize_tags', 'my_no_texturize_tags' ); function my_no_texturize_tags( $tags ) { $tags[] = 'span'; return $tags; } |
---------
согласитесь, что не очень удобно прокручивать страницу, чтобы посмотреть сноску
Комментариев нет »
No comments yet.
RSS feed for comments on this post. TrackBack URL
Leave a comment
Популярное за месяц
- Excel. Как сделать выбор значения ячейки из списка
- Правила оформления текстовых документов по ГОСТ 7.32 - 2001
- Как под рисунком сделать надпись в Word
- Windows 8.1 – не меняется яркость экрана. Решение проблемы
- Изменить формат ссылок R1C1 в Excel
- Настроить автоматическую сортировку писем по папкам в Outlook
- Удалить ненужные профили в Xbox 360
- Условия в PowerShell
- Как записать диск с MP3 программой Nero Burning Rom
- Подключение мыши CBR CM530Bt к компьютеру
Новое на сайте
- Разрезать клип на части в Vegas Pro
- Разрешить воспроизведение видео MP4 на сайте
- Не отправляются сообщения при нажатии Enter в веб-версии WhatsApp в Chrome
- Не запрашивать пароль после отключения экрана в Windows 10
- Программа для склеивания видео MP4Joiner
- Не открывается крышка бензобака в Opel Antara
- Офигенные стекла для Honor 8 Lite на AliExpress
- Запросы для обновления базы данных WordPress при изменении адреса сайта
- Программы для контроля и ограничения использования телефона ребенка
- Запретить запуск приложений Windows
Популярное за 24 часа
- Excel. Как сделать выбор значения ячейки из списка
- Настроить автоматическую сортировку писем по папкам в Outlook
- Как под рисунком сделать надпись в Word
- Windows 8.1 – не меняется яркость экрана. Решение проблемы
- Удалить ненужные профили в Xbox 360
- Правила оформления текстовых документов по ГОСТ 7.32 - 2001
- Условия в PowerShell
- Подключение мыши CBR CM530Bt к компьютеру
- Изменение кодировки сохраняемых файлов в Visual Studio Code
- Рекомендации по созданию хорошей подписи в электронной почте