Для пояснения пользователям назначения того или иного элемента на странице сайта (ссылки, кнопки, изображения и т.д.) часто используются всплывающие подсказки (tooltip), которые в Joomla можно вставлять без посторонних дополнений простым HTML.
Общие замечания
- Подсказки с пустой строкой текста не отображаются в любом случае.
- Необходимо указывать
container: 'body', чтобы избежать проблем с рендерингом в сложных комплексных компонентах (группы ввода, группы кнопок и т. д.). - Запуск всплывающих подсказок для элементов
hiddenне работает. - Подсказки для элементов
.disabledилиdisabledзапускаются для блока-оболочки. - При запуске для гиперссылок, которые занимают несколько строк, всплывающие подсказки будут центрированы. Используйте
white-space: nowrap;для<a>, чтобы обойти эту проблему. - Всплывающие подсказки должны быть скрыты до того, как соответствующие им элементы будут удалены из модели DOM.
- Всплывающие подсказки могут запускаться благодаря элементу внутри теневого DOM.
Примеры
В следующем абзаце показано, как подсказки могут использоваться для ссылок:
Текст-заполнитель для демонстрации некоторых встроенных ссылок с подсказками. Теперь это просто заполнитель, а не что-нибудь еще очень умное. Контент размещен здесь только для того, чтобы имитировать наличие реального текста. И все это только для того, чтобы дать вам представление о том, как будут выглядеть всплывающие подсказки при использовании на настоящем сайте. Итак, надеюсь, теперь вы увидели, как эти всплывающие подсказки для ссылок могут работать на практике, как только вы используете их на своем собственном сайте или в проекте.
Код данного абзаца следующий:
<p>Текст-заполнитель для демонстрации некоторых <a href="#" data-bs-toggle="tooltip" style="white-space: nowrap"
title="Встроенная ссылка с подсказкой">встроенных ссылок с подсказками</a>. Теперь это просто заполнитель,
а не что-нибудь еще очень умное. Контент размещен здесь только для того, чтобы имитировать наличие <a href="#"
data-bs-toggle="tooltip" style="white-space: nowrap" title="Еще подсказка">реального текста</a>. И все это только
для того, чтобы дать вам представление о том, как будут выглядеть всплывающие подсказки при использовании на
<a href="#" data-bs-toggle="tooltip" style="white-space: nowrap" title="" data-bs-original-title="Вот бы попасть на настоящий
сайт" style="white-space: nowrap" >настоящем сайте</a>. Итак, надеюсь, теперь вы увидели, как эти всплывающие
подсказки для ссылок могут работать на практике, как только вы <a href="#" data-bs-toggle="tooltip" title="А это последняя
подсказка" style="white-space: nowrap;" >используете их на своем собственном сайте</a> или в проекте.</p>
Второй пример с кнопками. При этом заметьте, что подсказки всплывают в разных направлениях: вверх, вправо, вниз и влево. При использовании направления письма RTL направления отзеркалятся.
Код такой:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Подсказка вверх">Подсказка вверх</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="Подсказка вправо">Подсказка вправо</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Подсказка вниз">Подсказка вниз</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="" data-bs-original-title="Подсказка влево">Подсказка влево</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="" data-bs-original-title="<em>Подсказка</em> <u>с использованием</u> <b>HTML</b>">Подсказка с использованием HTML</button>
