Тоже хорошая штучка. Смысл: выделенное слово через ббкод, наводим на него мышкой, получаем мышку с маленьким знаком вопроса и подсказку. Будет полезна тем, у кого на форуме просто уйма специфических слов, которые смогут понять не так много пользователей. :)
+
Что делаем:

идем в админку -> сообщения -> bbcodes -> добавить новый ббкод


Прописываем:

Использование BBCode

Код: Выделить всё

[acronym]{TEXT1},{TEXT2}[/acronym]

Замена HTML

Код: Выделить всё

<acronym title="{TEXT2}" style="cursor:help; font-weight: bold; color: black; text-decoration:none;">{TEXT1}</acronym>

В подсказке

Код: Выделить всё

Acronym: [acronym]Text,Popuptext[/acronym]

К сожалению, черный вопросительный знак на скриншоте не появился. Верьте на слово :D Но штучка стоит того. Можно изменить параметры выделенного слова (на скриншоте: в ббкоде убрала декорацию и изменила цвет на зеленый). :)


Приятного аппетита! :)
Комментарии: 106

ПитерПетр 10 сен 2021, 19:14 Сообщение

И как прописать по новому, что бы обрабатывалось гаджетами? Я прошел по ссылке на новый вариант, но он также работает только на компе
  • 0

CabinetAdmin 10 сен 2021, 19:48 Сообщение

Потому что он выводит подсказку через обычный title="".
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 10 сен 2021, 19:59 Сообщение

То есть вариантов примечания для текста под скроллом нет?
  • 0

CabinetAdmin 10 сен 2021, 20:55 Сообщение

Ну я перечислил их на той странице - мириться.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 10 сен 2021, 22:17 Сообщение

Есть такой вариант, который работает и на гаджетах.

Код: Выделить всё

 [tip={TEXT2}]{TEXT1}[/tip]
HTML замена

Код: Выделить всё

<style>
p.tt {position: relative;}
a.tooltip:hover { background:#FFFFFF; text-decoration:none; }
a.tooltip span { display:none; width:50%; text-align: left; }
a.tooltip:hover span { display:block; position:absolute; z-index: 100; top: 20px; left: 50px; border: 1px solid #565656; padding: 5px 5px; background: #FFFFFF; color:#3A3A3A; }
</style>
<p class="tt">
<a class="tooltip">{TEXT1}<span><img src="http://webdevoloper.4adm.ru/storage/webdevoloper_4adm_ru/images/tip.png" width="15" height="15"/>{TEXT2}</span></a> 
</p>
Да и текст довольно удачный — хорошо виден, правда не копируется. Ну да ладно с копированием. Вопрос в том, что он автоматом переносить слово (к которому идет примечание) автоматом переходит на новую строку влево. Я не могу понять в HTML замене — может там есть какое-то указание на это? Нужно чтобы слово с примечанием оставалось на своем месте в предложении. Если такая возможность есть, то было бы самое оно. Нужно еще понять где можно поменять ширину этого поля (чересчур большая), стиль текста. Но это уже потом. Главное чтобы слова с примечанием оставались на своих местах в тексте.
  • 0

CabinetAdmin 11 сен 2021, 09:16 Сообщение

Тот ббкод, что у вас сейчас, и вот это по сути одно и тоже, только в разном исполнении.

Текст у вас переносится из-за блочного тега p, поменяйте его на span и в структуре и в стиле (p.tt). Ширина - width:50%;.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 11 сен 2021, 09:34 Сообщение

Уже лучше. Но вся всплывающая подсказка изменила размеры. Вы можете полностью прописать HTML замену? И если возможно — что в замене означает параметры: стиль слова, к которому есть примечание; ширина и цвет всплывающего окна, чтобы я мог изменить.
  • 0

CabinetAdmin 11 сен 2021, 21:36 Сообщение

Питер писал(а): 11 сен 2021, 09:34 Вы можете полностью прописать HTML замену?
Что, поменять p на span?

Код: Выделить всё

<span class="tt">
<a class="tooltip">{TEXT1}<span><img src="http://webdevoloper.4adm.ru/storage/webdevoloper_4adm_ru/images/tip.png" width="15" height="15"/>{TEXT2}</span></a> 
</span>
Стили выносите в стилевой файл. Изображение из ббкода закачиваете к себе на форум и меняете путь.

span.tt - текст.
a.tooltip span и a.tooltip:hover span - всплывающее окно.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 11 сен 2021, 21:42 Сообщение

ОЙ! Вот тут я уже запутался полностью. У меня в этом варианте было прописано все в HTML замене. Вот теперь я не понимаю. Что именно в HTML замене, какая часть (я так понимаю, то что вы написали выше) в стили? И в каком файле стиля (и именно в каком месте в самом файле) добавлять. Можно чуть подробнее. А то, точно накосячу. Заранее благодарен.
P.S. Внес в контент

Код: Выделить всё

 <style>
p.tt {position: relative;}
a.tooltip:hover { background:#FFFFFF; text-decoration:none; }
a.tooltip span { display:none; width:50%; text-align: left; }
a.tooltip:hover span { display:block; position:absolute; z-index: 100; top: 20px; left: 50px; border: 1px solid #565656; padding: 5px 5px; background: #FFFFFF; color:#3A3A3A; }
</style>
в замену

Код: Выделить всё

<span class="tt">
<a class="tooltip">{TEXT1}<span><img src="http://webdevoloper.4adm.ru/storage/webdevoloper_4adm_ru/images/tip.png" width="15" height="15"/>{TEXT2}</span></a> 
</span>
.

Слово на месте и только подсвечивается при наведении мышки. Но всплывающего окошка нет. Стили и кэш обновил. Явно что блок неправильно оформлен в стиле.
  • 0

CabinetAdmin 13 сен 2021, 16:18 Сообщение

Я два раза упомянул, что нужно заменить p на span во всех местах, и в структуре и в стилях. В первый раз даже в скобках указал место.
Питер писал(а): 11 сен 2021, 21:42 Можно чуть подробнее.
html структура, это html структура, это теги и всё то из чего состоит страница. Стили, это то как эта страница будет отображаться. В вашем первом коде прямо так и написано <style> - стили. Во втором понятное дело структура. Значит в замену идёт только второй код.

Стили всегда (преимущественно всегда) должны находиться в стилевом файле. Во всём должен быть порядок. Конкретно в какой вам файл добавлять - не знаю, тут уж вам решать, в какой обычно добавляли, в тот же самый и добавьте в самый конец. Можно создать новый файл для вот таких моментов и подключить его добавив новую строку в stylesheet.css или напрямую в шаблоне overall_header.html.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 13 сен 2021, 18:04 Сообщение

Вот уж действительно, если пользоваться детективной терминологией, знаменитое “Похищенное письмо’ Эдгара По. Единственную ‘р” в самом начале блока в стилях пропустил. Но теперь вся всплывающая подсказка изменила размеры. Я вижу где прописана ширина и длина. Но как прописать, чтобы она было не фиксированная, а зависла от количества текста в подсказке, не улавливаю. Подскажите?
  • 0

CabinetAdmin 13 сен 2021, 18:47 Сообщение

Сразу скажу - код я не ставил и визуально не видел как он отрабатывает.
На вскидку могу сказать (судя по коду) ширина (width:50%;) здесь лишняя. Код будет работать так: берётся ширина текста {TEXT1} и из него вычитается 50% для всплывающего окна... Такое себе решение. После удаления ширина окна будет тоже не супер, ширина окна будет зависеть от самого длинного слова, то есть слова будут как бы в столбик. Можно вместо ширины добавить white-space: nowrap;, это свойство не позволяет тексту переноситься на новую строку, только через <br />. В таком виде ещё можно что-то рабочее соорудить.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 13 сен 2021, 19:13 Сообщение

С добавлением white-space: nowrap; уже лучше. Но! На винде, если слово с правого края, то появляется горизонтальный скролл. Не супер. Хотя еще можно мириться. Но на ‘яблоке’ (причем любом: комп, гаджеты) ничего подобного нет. Примечание режется полностью. Руки опускаются. Похоже этот вопрос нерешаем в принципе. Скролл режет любой свой вариант подсказки. А самая простая на основе acronym, использующая оригинальный стиль движка, не обрабатывается на яблочных (а может и на других гаджетах). Хотя это странно вообще-то. Ведь сами стандартные всплывающие окошки (оригинальные форумные) работают нормально на всех устройствах.
  Впрочем, получается что этот вариант (tooltip) вообще не подходит. Скролл или нет, подсказка слова с правого края, режется напрочь. То есть, на зря изначально (оригинальный вариант) предусматривает перенос слова (к которому есть примечание) на новую строку — чтобы все всплывающее объяснение было слева.
  • 0

CabinetAdmin 13 сен 2021, 21:01 Сообщение

Я сразу сказал - мириться и выкручиваться.

Оригинальные всплывашки, они же подсказки, работают через title="", а они никак не завязаны с содержимым страницы, их работа и вид зависят от настроек операционной системы и браузера.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 13 сен 2021, 21:04 Сообщение

А эту же систему title="" никак нельзя использовать и для своих подсказок? Те есть без никаких фокусов, специальных отличительных шрифтов и прочее. Просто чтобы работало на всех устройствах.
  • 0

Похожие темы