Тоже хорошая штучка. Смысл: выделенное слово через ббкод, наводим на него мышкой, получаем мышку с маленьким знаком вопроса и подсказку. Будет полезна тем, у кого на форуме просто уйма специфических слов, которые смогут понять не так много пользователей.
Что делаем:
идем в админку -> сообщения -> bbcodes -> добавить новый ббкод
Прописываем:
Использование BBCode
Замена HTML
В подсказке
К сожалению, черный вопросительный знак на скриншоте не появился. Верьте на слово Но штучка стоит того. Можно изменить параметры выделенного слова (на скриншоте: в ббкоде убрала декорацию и изменила цвет на зеленый).
Приятного аппетита!
+
идем в админку -> сообщения -> 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]
К сожалению, черный вопросительный знак на скриншоте не появился. Верьте на слово Но штучка стоит того. Можно изменить параметры выделенного слова (на скриншоте: в ббкоде убрала декорацию и изменила цвет на зеленый).
Приятного аппетита!
Комментарии: 106
Есть такой вариант, который работает и на гаджетах.
HTML замена
Да и текст довольно удачный — хорошо виден, правда не копируется. Ну да ладно с копированием. Вопрос в том, что он автоматом переносить слово (к которому идет примечание) автоматом переходит на новую строку влево. Я не могу понять в HTML замене — может там есть какое-то указание на это? Нужно чтобы слово с примечанием оставалось на своем месте в предложении. Если такая возможность есть, то было бы самое оно. Нужно еще понять где можно поменять ширину этого поля (чересчур большая), стиль текста. Но это уже потом. Главное чтобы слова с примечанием оставались на своих местах в тексте.
Код: Выделить всё
[tip={TEXT2}]{TEXT1}[/tip]
Код: Выделить всё
<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>
Тот ббкод, что у вас сейчас, и вот это по сути одно и тоже, только в разном исполнении.
Текст у вас переносится из-за блочного тега
Текст у вас переносится из-за блочного тега
p
, поменяйте его на span
и в структуре и в стиле (p.tt
). Ширина - width:50%;
.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Что, поменять
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
- всплывающее окно.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
ОЙ! Вот тут я уже запутался полностью. У меня в этом варианте было прописано все в HTML замене. Вот теперь я не понимаю. Что именно в HTML замене, какая часть (я так понимаю, то что вы написали выше) в стили? И в каком файле стиля (и именно в каком месте в самом файле) добавлять. Можно чуть подробнее. А то, точно накосячу. Заранее благодарен.
P.S. Внес в контент в замену
.
Слово на месте и только подсвечивается при наведении мышки. Но всплывающего окошка нет. Стили и кэш обновил. Явно что блок неправильно оформлен в стиле.
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>
Слово на месте и только подсвечивается при наведении мышки. Но всплывающего окошка нет. Стили и кэш обновил. Явно что блок неправильно оформлен в стиле.
Я два раза упомянул, что нужно заменить
Стили всегда (преимущественно всегда) должны находиться в стилевом файле. Во всём должен быть порядок. Конкретно в какой вам файл добавлять - не знаю, тут уж вам решать, в какой обычно добавляли, в тот же самый и добавьте в самый конец. Можно создать новый файл для вот таких моментов и подключить его добавив новую строку в
p
на span
во всех местах, и в структуре и в стилях. В первый раз даже в скобках указал место.html структура, это html структура, это теги и всё то из чего состоит страница. Стили, это то как эта страница будет отображаться. В вашем первом коде прямо так и написано
<style>
- стили. Во втором понятное дело структура. Значит в замену идёт только второй код.Стили всегда (преимущественно всегда) должны находиться в стилевом файле. Во всём должен быть порядок. Конкретно в какой вам файл добавлять - не знаю, тут уж вам решать, в какой обычно добавляли, в тот же самый и добавьте в самый конец. Можно создать новый файл для вот таких моментов и подключить его добавив новую строку в
stylesheet.css
или напрямую в шаблоне overall_header.html
.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Вот уж действительно, если пользоваться детективной терминологией, знаменитое “Похищенное письмо’ Эдгара По. Единственную ‘р” в самом начале блока в стилях пропустил. Но теперь вся всплывающая подсказка изменила размеры. Я вижу где прописана ширина и длина. Но как прописать, чтобы она было не фиксированная, а зависла от количества текста в подсказке, не улавливаю. Подскажите?
Сразу скажу - код я не ставил и визуально не видел как он отрабатывает.
На вскидку могу сказать (судя по коду) ширина (
На вскидку могу сказать (судя по коду) ширина (
width:50%;
) здесь лишняя. Код будет работать так: берётся ширина текста {TEXT1}
и из него вычитается 50% для всплывающего окна... Такое себе решение. После удаления ширина окна будет тоже не супер, ширина окна будет зависеть от самого длинного слова, то есть слова будут как бы в столбик. Можно вместо ширины добавить white-space: nowrap;
, это свойство не позволяет тексту переноситься на новую строку, только через <br />
. В таком виде ещё можно что-то рабочее соорудить.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
С добавлением white-space: nowrap; уже лучше. Но! На винде, если слово с правого края, то появляется горизонтальный скролл. Не супер. Хотя еще можно мириться. Но на ‘яблоке’ (причем любом: комп, гаджеты) ничего подобного нет. Примечание режется полностью. Руки опускаются. Похоже этот вопрос нерешаем в принципе. Скролл режет любой свой вариант подсказки. А самая простая на основе acronym, использующая оригинальный стиль движка, не обрабатывается на яблочных (а может и на других гаджетах). Хотя это странно вообще-то. Ведь сами стандартные всплывающие окошки (оригинальные форумные) работают нормально на всех устройствах.
Впрочем, получается что этот вариант (tooltip) вообще не подходит. Скролл или нет, подсказка слова с правого края, режется напрочь. То есть, на зря изначально (оригинальный вариант) предусматривает перенос слова (к которому есть примечание) на новую строку — чтобы все всплывающее объяснение было слева.
Впрочем, получается что этот вариант (tooltip) вообще не подходит. Скролл или нет, подсказка слова с правого края, режется напрочь. То есть, на зря изначально (оригинальный вариант) предусматривает перенос слова (к которому есть примечание) на новую строку — чтобы все всплывающее объяснение было слева.
Я сразу сказал - мириться и выкручиваться.
Оригинальные всплывашки, они же подсказки, работают через
Оригинальные всплывашки, они же подсказки, работают через
title=""
, а они никак не завязаны с содержимым страницы, их работа и вид зависят от настроек операционной системы и браузера.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
{TEXT2}
{TEXT2} | + {TEXT1}
Стандартный BBcode скрытого текста. Хочу использовать его в качестве примечаний в тексте поста. То есть, во-первых... -
CabinetAdmin , приветствую!
Использование BBCode
{TEXT}
Замена HTML
Spoiler :
{TEXT}
Подсказка
Spoiler с паролем: СООБЩЕНИЕ... -
Здравствуйте.
Нужен простой ббкод для вставки youtube. Искал на просторах все не рабочие может у кого есть в наличии поделитесь пожалуйста.
Версия...