Как оптимизировать поведение tooltips для мобильных устройств?

Question

[lavezzi1]

Сделал tooltips на css.
Такой конструкции. Для десктопа все устраивает, с учетом того что это был один из немногих вариантов который работает с RoR при моем случае. Ссылка сделана иконкой. Но не нравится как это дело работает на мобильных устройствах.

Что посоветуете для решение проблемы отображения на них? Как вообще должно выглядеть на моб. устройствах?

tooltip {
&:after {
content: attr(data-title);
opacity:0;
visibility: hidden;
}
tooltip {
&:hover:after {
opacity: 1;
visibility: visible;

Answer 1

[Игорь Воротнёв]

ИМХО:
1. Если тултипы не критичны для работы системы (расширенные подсказки, тайтлы и тд) - на мобильном отключать вообще, они только мешают.
2. Если тултипы критичны (меню, критические подсказки и тд) - оставлять, по тапу. Но очень желательно элемент, который триггерит тултип, выделять визуально (например, иконкой)

Comments

[lavezzi1]

Спасибо. Только получается так, что элемент который триггерит тултип это ссылка - тап означает переход по ней...

[Игорь Воротнёв]

lavezzi1: именно поэтому я и говорю, если тултип не критичен (а вообще они не должны быть критичны, ибо у них плохо с accessibility), то на мобильном он не нужен вообще. Если критичен (например, в виде тултипа идет меню или подробное описание элемента), тогда элемент, который триггерит на мобильном должен быть без ссылки (ну или preventDefault)