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

идем в админку -> сообщения -> 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

CabinetAdmin 08 ноя 2017, 18:50 Сообщение

Питер писал(а): к примеру hint
Да.

Стили надо добавлять в стили. Либо как я уже писал ранее - в замену html:

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

<span class="tooltip">{TEXT2} <span>{TEXT1}</span></span>
<style>
... Стили, что я дал выше ...
</style>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 08 ноя 2017, 19:11 Сообщение

Что то не получается.
Если загоняю скрипт в стиле — prosilver — content сразу слетел весь форум. Длиннющая "простыня" ошибок. Резкие фразы на латинице могут влиять на это?

Сделал в замену HTML как вы написали выше, даже на прелпросмотре, страницу как бы "клинит" — статичная картинка без скролла вниз.
  • 0

CabinetAdmin 08 ноя 2017, 19:43 Сообщение

Питер писал(а): Если загоняю скрипт в стиле — prosilver — content сразу слетел весь форум.
В смысле слетает? В смысле скрипт?
Что за резкие фразы на латинице?
Рассказывайте куда и что добавляете.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 08 ноя 2017, 19:47 Сообщение

Т9 ,Блин. Русские фразы в скрипте.
CabinetAdmin писал(а): В смысле слетает? В смысле скрипт?
После добавления скрипта в стиле — prosilver — content и обновления в админке стиля и темы, форум исчез. Просто длиннющей список ошибок. Я тут же вернул предыдущий файл content
  • 0

CabinetAdmin 08 ноя 2017, 20:11 Сообщение

Скрипт это скрипт, стили это стили. Скрипт размещается в структуре html и обёрнут в <script> ... </script> и, что в обёртке, что без, не может размещаться в стилевых файлах. Стили размещаются в стилевых файлах в папке theme, так же они могут размещаться в структуре html, но в таком случае они должны быть обёрнуты тегом <style> ... </style>.

Ладно, хорошо, попробуем по другому.

Открыть content.css и в самый конец добавить:

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

.tooltip2 {
	display: inline-block;
	position: relative;
	cursor: help;
}
.tooltip2 > span {
	position: absolute;
	bottom: 100%;
	left: -20em; /* = max-width */
	right: -20em; /* = max-width */
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;  /* ширина подсказки может быть не более содержимого */
	max-width: 20em;  /* ширина подсказки может быть не более 20em */
	max-height: 80vh; /* необязательное ограничение по высоте подсказки, 1vh — это 1% от ширины окна */
	overflow: auto;
	visibility: hidden;
	margin: 0 auto .4em;
	padding: .3em;
	border: solid rgb(200,200,200);
	font-size: 90%;
	background: #fff;
	line-height: normal;
	cursor: auto;
}
.tooltip2:after {
	/* треугольничек под подсказкой */
	content: "";
	position: absolute;
	top: -.4em;
	left: 50%;
	visibility: hidden;
	margin: 0 0 0 -.4em;
	border: .4em solid;
	border-color: rgb(200,200,200) transparent transparent transparent;
	cursor: auto;
}
.tooltip2:before {
	content: "";
	position: absolute;
	top: -.4em;
	left: 0;
	right: 0;
	height: .4em;
	visibility: hidden;
}
.tooltip2:hover > span, .tooltip2:hover:before, .tooltip2:hover:after,
.tooltip2:focus > span, .tooltip2:focus:before, .tooltip2:focus:after {
	visibility: visible;
	transition: 0s .4s;
}
.tooltip2:focus {
	outline: none;
}
Создать новый ббкод:

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

[acronym2={TEXT1}]{TEXT2}[/acronym2]
замена:

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

<span class="tooltip2">{TEXT2} <span>{TEXT1}</span></span>
подсказка:

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

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

ПитерПетр 08 ноя 2017, 20:30 Сообщение

Увы.
Попробую описать происходящее. После добавления стиля и обновления "компоненты стилей" — "тема" форум "слетел" и

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

SQL ERROR [ mysql4 ]

Incorrect string value: '\xF8\xE8\xF0\xE8\xED\xE0...' for column 'theme_data' at row 1 [1366]

SQL
и дальше еще много чего. "Простыня". То есть "Темы" не обновились. Вернулся на главную страницу — форум вроде работает как обычно. Добавил bbcode, но он не сработал. Оба "текста" (подсказка и сам текст) написано обычно. Вернул content рабочий (предыдущий). Вкладка темы обновилось нормально.
Как то так
  • 0

CabinetAdmin 09 ноя 2017, 16:25 Сообщение

Как добавляете данный код что я дал выше? Ваша ошибка говорит о том, что какой-то файл (скорее всего это content.css) сохранён не в UTF-8 без BOM. Для редактирования используйте Notepad++, сверху в меню есть пункт "Кодировки", на редактируемом файле установите UTF-8 без BOM, добавьте стили, те что выше, закачайте на сервер и очистите кеш вручную (удалить все файлы из папки cache кроме .htaccess и index.htm).
Перед всей манипуляцией хорошо бы сделать бекап.

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

ПитерПетр 09 ноя 2017, 19:42 Сообщение

Я просто убрал комментарии с кирилилцей. Стили обновилсь без проблем. Но bbcode не работает. Просто текст (в моем случае * и то, что должны пояснением (примечанием) написаны рядом обычным текстом.
  • 0

CabinetAdmin 09 ноя 2017, 20:21 Сообщение

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

ПитерПетр 09 ноя 2017, 20:32 Сообщение

Ну это же азы. Само собой. И не один раз

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

[acronym2=раз]1[/acronym2]
На выходе: 1 раз
  • 0

CabinetAdmin 09 ноя 2017, 20:40 Сообщение

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

ПитерПетр 09 ноя 2017, 20:47 Сообщение

Даже не знаю что сказать.
На сафари МАСа, на айфоне и айпада все также: 1 раз.
На винде обычного стационарного компа, есть только цифра 1. Если подвести к ней мышку, то появляется знак вопроса и только.
А что там должно появится то? Я так понимаю, подсказка, но не стандартная. Можно скриншот?
  • 0

CabinetAdmin 10 ноя 2017, 17:09 Сообщение

Раз на винде только цифра, значит стили обновились. А то что не видно подсказки, я скорее всего понял почему. В коде задано, что подсказка будет выводиться сверху, а у места сообщения (именно сообщение, без кнопок и времени и тд) есть параметр overflow: hidden;, т.е. всё что выходит за границу сообщения просто не видно. Возможно что у вас текст и подсказкой находится в первой строке сообщения и подсказку не видно. Можно сделать чтобы подсказка выводилась внизу:

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

.tooltip2 {
	display: inline-block;
	position: relative;
	cursor: help;
}
.tooltip2 > span {
	position: absolute;
	top: 100%;
	left: -20em; /* = max-width */
	right: -20em; /* = max-width */
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;  /* ширина подсказки может быть не более содержимого */
	max-width: 20em;  /* ширина подсказки может быть не более 20em */
	max-height: 80vh; /* необязательное ограничение по высоте подсказки, 1vh — это 1% от ширины окна */
	overflow: auto;
	visibility: hidden;
	margin: .4em auto 0;
	padding: .3em;
	border: solid rgb(200,200,200);
	font-size: 90%;
	background: #fff;
	line-height: normal;
	cursor: auto;
}
.tooltip2:after {
	/* треугольничек под подсказкой */
	content: "";
	position: absolute;
	bottom: -.4em;
	left: 50%;
	visibility: hidden;
	margin: 0 0 0 -.4em;
	border: .4em solid;
	border-color: transparent transparent rgb(200,200,200) transparent;
	cursor: auto;
}
.tooltip2:before {
	content: "";
	position: absolute;
	bottom: -.4em;
	left: 0;
	right: 0;
	height: .4em;
	visibility: hidden;
}
.tooltip2:hover > span, .tooltip2:hover:before, .tooltip2:hover:after,
.tooltip2:focus > span, .tooltip2:focus:before, .tooltip2:focus:after {
	visibility: visible;
	transition: 0s .4s;
}
.tooltip2:focus {
	outline: none;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 10 ноя 2017, 17:21 Сообщение

Я пока (сегодня) не могу проверить не могу проверить новый вариант стиля. Но!
CabinetAdmin писал(а): Возможно что у вас текст и подсказкой находится в первой строке сообщения и подсказку не видно.
Это далеко не так. Я сейчас специально проверил и поставил текст с пояснением чуть ли в середине сообщения. Ничего не изменилось, хотя сверху места "вагон и маленькая тележка". Кроме того, если даже на винде заработает, то это не решение. А как же МАК с сафари?
  • 0

CabinetAdmin 10 ноя 2017, 18:05 Сообщение

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

Похожие темы