Bootstrap - Подсказки: Пособие для начинающих

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в奇妙ный мир подсказок Bootstrap. Как ваш доброжелательный邻居-преподаватель компьютерных наук, я здесь, чтобы провести вас через это путешествие шаг за шагом. Не волнуйтесь, если вы никогда не писали ни строчки кода раньше - мы начнем с самого начала и будем двигаться вверх. Так что возьмите чашечку кофе (или ваш любимый напиток) и начнем!

Что такое подсказки?

Прежде чем мы углубимся в детали, давайте поймем, что такое подсказки. Вы когда-нибудь наводили курсор мыши на иконку или текст на веб-сайте и видели маленькое всплывающее окно с дополнительной информацией? Это подсказка! Они такие как маленькие помощники, которые предоставляют дополнительный контекст или объяснения, не загромождая ваш основной контент.

Включение подсказок

Теперь давайте脏 руками немного кода. Первое, что нам нужно сделать, это включить подсказки в Bootstrap. Не волнуйтесь; это проще, чем кажется!

<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

Этот маленький скрипт говорит Bootstrap: "Эй, мы хотим использовать подсказки на этой странице!" Это как включить свет перед тем, как увидеть в темной комнате.

Создание подсказки

Давайте создадим нашу первую подсказку. Это так просто, как добавить несколько атрибутов к HTML-элементу:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Я подсказка!">
Наведите курсор на меня
</button>

Вот что происходит:

• Мы создаем кнопку, используя классы Bootstrap btn и btn-secondary.
• data-toggle="tooltip" говорит Bootstrap, что этот элемент должен иметь подсказку.
• title="Я подсказка!" - это текст, который появится в нашей подсказке.

Когда вы наведете курсор на эту кнопку, вы увидите "Я подсказка!" всплывающим. Волшебство, правда?

Подсказки на ссылках

Подсказки не только для кнопок. Давайте добавим одну к ссылке:

<a href="#" data-toggle="tooltip" title="Нажмите, чтобы перейти куда-то!">Наведите курсор на эту ссылку</a>

Это работает так же, как наш пример с кнопкой. Когда вы наведете курсор на ссылку, вы увидите сообщение подсказки.

Пользовательские подсказки

Теперь давайте немного пофантазируем. Мы можем настроить наши подсказки, чтобы сделать их более интересными:

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true"
title="<em>Подсказка</em> <u>с</u> <b>HTML</b>">
Наведите для HTML подсказки
</button>

В этом примере мы добавили data-html="true", чтобы разрешить HTML в нашей подсказке. Теперь мы можем использовать тэги, такие как <em>, <u>, и <b>, чтобы стилизовать текст нашей подсказки.

Позиционирование подсказки

Мы можем контролировать, где появляется наша подсказка по отношению к элементу. Давайте попробуем все четыре позиции:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Подсказка сверху">
Подсказка сверху
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Подсказка справа">
Подсказка справа
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Подсказка снизу">
Подсказка снизу
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Подсказка слева">
Подсказка слева
</button>

Атрибут data-placement говорит Bootstrap, где поместить подсказку. Это как сказать своему другу, где встать для фотографии!

Подсказка с пользовательским HTML

Помните, как мы включили HTML в нашу подсказку раньшe? Давайте пойдем дальше:

<button type="button" class="btn btn-danger" data-toggle="tooltip" data-html="true"
title="<h3>Пользовательский заголовок</h3><p>Это абзац.</p><img src='smiley.gif' alt='Смайлик'>">
Наведите для сюрприза!
</button>

Эта подсказка включает заголовок, абзац и даже изображение! Это как迷你-веб-страница внутри вашей подсказки.

Разметка

Иногда вам может понадобиться больше контроля над структурой вашей подсказки. Тогда на помощь приходит пользовательская разметка:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' title="Пользовательская подсказка">
Пользовательская разметка подсказки
</button>

Этот пример использует атрибут data-template для определения пользовательской структуры нашей подсказки. Это как построить дом вместо того, чтобы купить готовый!

Подсказка на отключенных элементах

Обычно отключенные элементы не вызывают пользовательских взаимодействий. Но с маленьким трюком мы можем сделать подсказки работать на них:

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Подсказка для отключенного">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Отключенная кнопка</button>
</span>

Мы оборачиваем нашу отключенную кнопку в span, который может получить фокус. Это как дать помощника тому, кто не может дотянуться до верхней полки!

Опции

Наконец, рассмотрим некоторые опции, которые мы можем использовать для further настройки наших подсказок:

Опция	Тип	По умолчанию	Описание
animation	boolean	true	Применить CSS-переход к подсказке
container	string | false	false	Прикрепить подсказку к конкретному элементу
delay	number | object	0	Задержка отображения и скрытия подсказки (мс)
html	boolean	false	Разрешить HTML в подсказке
placement	string | function	'top'	Как位置ить подсказку
selector	string	false	Если указан селектор, объекты подсказки будут委派 к указанным целям
template	string	<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>	Основной HTML для использования при создании подсказки
title	string | element | function	''	Значение заголовка по умолчанию, если атрибут title не указан
trigger	string	'hover focus'	Как вызывается подсказка - click | hover | focus | manual

Вы можете использовать эти опции при инициализации ваших подсказок:

$('#example').tooltip({
animation: false,
delay: { "show": 500, "hide": 100 },
placement: 'right'
});

Этот код отключает fade-анимацию, добавляет задержку и размещает подсказку справа от элемента.

И вот и все! Вы только что сделали свои первые шаги в мир подсказок Bootstrap. Помните, ключ к maîtriser это (и любое понятие кодирования) - это практика. Попробуйте создать веб-страницу и добавить к ней разные типы подсказок. Экспериментируйте с опциями и посмотрите, что у вас получится.

Before you know it, you'll be the tooltip master, and your webpages will be informative and interactive! Happy coding, and don't forget to have fun along the way!

Credits: Image by storyset