Как уже многие выяснили, подсказка-всплывашка по тегу "поясняющий текст" не работает на мобильных устройствах. И годами ломали об это голову.
Какое-то время назад наткнулся на вариант решения проблемы, и тут меня к месту об этом спросили, поскольку проблема повсеместная и неприятная — потому решил набросать пример костыля на коленке и опубликовать отдельной темой. JS не нужен, только CSS.
Внимание №1: фикс работает только на форумах с подрубленным viewport.
Внимание №2: если у вас viewport в настройках никогда не был подключен, то не исключено, что вам нужно будет адаптировать дизайн под него на мобильных (а может случиться, что и на пк) устройствах, поскольку некоторые стилевые параметры при нем считываются по-другому. Может что-то поехать.
Внимание №3: В принципе этот код можно воткнуть и глобально, без media screen. И без viewport. Но тогда нужно отдельно скриптами убивать автопоказ нормального title в сообщениях при наводке мыши, потому что на пк у вас тогда будет вылезать 2 тултипа.
0. Если у вас не используется мобильный стиль, то идем в "Настройки" > "Мобильный стиль" > "Вставить только viewport". Если используется, то ничего тут делать не надо.
1. С самим title на тачскрине мы ничего без скриптостраданий уже не сделаем, потому идем в обход через псевдо-элементы after/before.
2. Вставляем код в "свой стиль", куда-нибудь в самый низ (в код мобильного дизайна и без второго media screen, если он у вас уже используется):
@media screen and (max-width: 540px) {
abbr {
padding:15px;
}
/* дадим дополнительное пространство для клика на тачскрине: актуально для маленьких экранов, особенно если тегнутое слово окружено ссылками или ваще звёздочка, значение и типы отступов меняем под свои реалии */abbr[title] {
position:relative;
}abbr[title]::after {
content: attr(title);
display:none;
text-align:left;
}abbr[title]:hover::after {
position:absolute;
display:block;
background-color: #1e1e1e;
color: #fff;
border-radius: 3px;
box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
font-size: 14px;
padding: 3px 5px;
}}
С absolute позиционирование всплывашки надо подгонять ручками под свой дизайн, поскольку оно может зависеть от окружающей верстки. Или, как вариант, можно тут вообще выставить relative, тогда всплывашка будет вылезать под тегом, а не поверх него. Может быть немного неудобно, если подсказки в сплошном тексте (смещают текст вниз + могут показываться во всю ширину поста), но кому-то может оказаться несмертельным с учетом того, что иначе они вообще не работают. Тем более что можно попробовать поизгаляться с обтеканием.
Для мимолетных заметок в таблицах вариант с relative очень даже нормально смотрится.
У abbr padding:15px; значение правда устанавливаем своё, в зависимости от того, как верстка ведет себя на мобильных устройствах. Рекомендую отталкиваться от маленьких экранов. Я у себя смотрел и сравнивал по экранам Nokia 6.2 (большой экран) и Iphone SE (маленький) — и подсказки находятся именно что в окружении ссылок, на которые больше шансов кликнуть случайно, чем попасть в звёздочку.
В любом случае — подгон позиционирования требуется индивидуальный под каждый форум, увы. Единый шаблон может не подойти всем, потому ничего более тут не прописывал.
Надеюсь, что эта тема подгонит вам если и не 100%-готовое решение, то даст, от чего отталкиваться в оформлении этих вызывающих мигрень всплывашек.