оригинальная версия версия для слабовидящих контрастная версия выключить изображения включить изображения RSS FEED K2 NEWS
Вторник, 13 Август 2019 00:01

CSS: Подсказки (Tooltip)

В последнее время стало популярным, добавлять на сайт «подсказки», сам я не особо понимаю для чего они нужны, объясняя свою точку зрения следующим фактом: всё больше и больше пользователей переходят на смартфоны и планшеты, т.е. не пользуются мышью, не имея возможности «навести курсор» (а именно так подсказки и срабатывают). Для меня стало неожиданностью, когда я увидел эту самую «подсказку», на своём сайте, видимо в одном из обновлений Joomla они были добавлены в механизм, но вот беда – подсказки добавлены, а шаблон не настроен.

Конечно, семь бед – один ответ: «Интернет», куда я и направился искать ответ на вопросы, что делать, и кто виноват.

В HTML строка будет выглядеть так:

<a class="hasTooltip" href="/URL" rel="next" data-original-title="заголовок">АНКОР</a>

«Виноватым» можно выделить класс tooltip, и соответственно ответ на вопрос «что делать?» будет – настраивать. Собственно, выходом для меня стало добавление следующих стилей в CSS:

.tooltip{position:absolute;z-index:1030;display:block;visibility:visible;font-size:12px;line-height:1.4;opacity:0;filter:alpha(opacity=0)}
.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#247324;border-radius:4px}
.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid} .tooltip.in{opacity:.9;filter:alpha(opacity=90)}
.tooltip.top{margin-top:-3px;padding:5px 0}
.tooltip.right{margin-left:3px;padding:0 5px}
.tooltip.bottom{margin-top:3px;padding:5px 0}
.tooltip.left{margin-left:-3px;padding:0 5px}
.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#247324}
.tooltip.top-left .tooltip-arrow{bottom:0;left:5px;border-width:5px 5px 0;border-top-color:#247324}
.tooltip.top-right .tooltip-arrow{bottom:0;right:5px;border-width:5px 5px 0;border-top-color:#247324}
.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#247324}
.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#247324}
.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#247324}
.tooltip.bottom-left .tooltip-arrow{top:0;left:5px;border-width:0 5px 5px;border-bottom-color:#247324}
.tooltip.bottom-right .tooltip-arrow{top:0;right:5px;border-width:0 5px 5px;border-bottom-color:#247324}

Здесь, как можно увидеть, помимо самого поля подсказки идёт ещё и «стрелка» вниз, и её настройки. Я использовал под свою цветовую гамму (зелёно-белые цвета).

Спонсоры: