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

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

ПитерПетр 11 ноя 2017, 10:30 Сообщение

Увы. В винде появился только маленький треугольники (как на вашем к примере, но самой подсказки (как и прямоугольника в котором написана подсказка) нет. А на МАКе все тоже самое, как писал выше: текст и подсказка словно написаны обычно, только слова переставлены.
Стили, темы и кеш, естественно обновил.
  • 0

CabinetAdmin 12 ноя 2017, 08:57 Сообщение

Питер писал(а): текст и подсказка словно написаны обычно
Значит нет стилей. Не видит или на этом устройстве не обновляются стили и вы не видите результата. Ну раз не можете вы победить эту стилевую напасть, то как я уже раньше советовал - добавьте стили в ббкод, делов-то.

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

ПитерПетр 12 ноя 2017, 11:09 Сообщение

Вот чтобы уже попробовать и закрыть вопрос основательно. Как окончательно (с добавлением стиля в ббкод) должен выглядеть замена HTML?
  • 0

ПитерПетр 12 ноя 2017, 17:51 Сообщение

Черт его знает. Что в лоб, что по лбу. Не срабатывает.
  • 0

CabinetAdmin 13 ноя 2017, 16:33 Сообщение

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

<span class="tooltip2">{TEXT2} <span>{TEXT1}</span></span>
<style>
.tooltip2 {
	display: inline-block;
	position: relative;
	cursor: help;
}
.tooltip2 > span {
	position: absolute;
	top: 100%;
	left: -20em;
	right: -20em;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;
	max-width: 20em;
	max-height: 80vh;
	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;
}
</style>
Питер писал(а): Что в лоб, что по лбу. Не срабатывает.
Я на вашем форуме в стилях вижу стили, причём вижу их в конце content.css и после .more-close .link-more:after {.... Ага, вон оно чего, видимо вы редактировали стили, но не до конца, вот здесь:

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

.tooltip2 > span {
 position: absolute;
 top: 100%;
 left: -20em; / = max-width /
 right: -20em; / = max-width /
не до конца удалённые комментарии / = max-width /, это у вас ломает стили и подсказка, вместо того чтобы показываться снизу текста, показывается далеко слева. Удалите оба комментария и должно будет заработать.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 13 ноя 2017, 16:43 Сообщение

Еще раз, пожалуйста. Для "чайника".
Давайте так.
1. Что удалить (полностью) в content.css? Весь фрагмент
2. Что добавить (полностью) и каком месте в content.css? Весь фрагмент.
3. Я полностью удалил данный bbcode так как он вообще менял мне весь вид форума. Его надо ставить заново. Те есть, дайте мне полностью "Использование BBCode"; "Замена HTML" и "Подсказка".

Скажу честно. Понимаю, что я уже вас замучал. Сам себя неудобно чувствую. Но давайте уже закончим. Заранее спасибо!
  • 0

CabinetAdmin 13 ноя 2017, 17:54 Сообщение

Ну я же вроде написал что надо удалить... Ну ладно, давайте по новой..

Вариант номер раз

Добавить ббкод:

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

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

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

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

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

Acronym: [acronym2=Подсказка]Текст[/acronym2]

Открыть content.css, найти (в самом конце файла):

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

.tooltip2 > span {
 position: absolute;
 top: 100%;
 left: -20em; / = max-width /
 right: -20em; / = max-width /
и заменить на:

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

.tooltip2 > span {
 position: absolute;
 top: 100%;
 left: -20em;
 right: -20em;

Вариант номер два

Добавить ббкод:

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

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

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

<span class="tooltip2">{TEXT2} <span>{TEXT1}</span></span>
<style>
.tooltip2 {
	display: inline-block;
	position: relative;
	cursor: help;
}
.tooltip2 > span {
	position: absolute;
	bottom: 100%;
	left: -20em;
	right: -20em;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;
	max-width: 20em;
	max-height: 80vh;
	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;
}
</style>
подсказка:

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

Acronym: [acronym2=Подсказка]Текст[/acronym2]
Открыть content.css, найти (в самом конце файла) и удалить:

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

.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;
 max-height: 80vh;
 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
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 13 ноя 2017, 20:26 Сообщение

Использовал первый вариант
Работает, но как то коряво.
Во-первых только на МАКе. (причем что классно, даже в айпаде) Но на винде видно только цифру и знак вопроса. Сама подсказка не появляется.
Во-вторых bbcode можно использовать только если слева и снизу от него есть достаточно текста. То есть "запас места" на всплывающую подсказку. Иначе, если слева от нее недостаточно текста, то видно только половина подсказки), если снизу нет места, то буквы "разрезаются" вдоль и видна только верхняя половина. Проще говоря, в таких случаях подсказке не хватает места))

Если это можно как то решить (иначе нет смысла с ней возиться), то
3. Как прописать "замену HTML" чтобы текст подсказки (как правило это номер (цифра) в квадратных скобках, красного цвета и в верхнем регистре.
  • 0

ПитерПетр 14 ноя 2017, 10:40 Сообщение

Если всё-таки будете пытаться сделать, чтобы работало везде, то для информации — на айфоне тоже не работает. То есть частично. Видна цифра и если прикоснутся пальцем, то от подсказки виден только маленький треугольник. Даже странно. Обычно если работает на айподе, работает и на айфоне. У вас (на второй странице) в примере, подсказка корректно работает и на айфоне. Блин. что же неправильно делаю.
  • 0

CabinetAdmin 14 ноя 2017, 15:44 Сообщение

Питер писал(а): Если это можно как то решить
Я уже писал:
CabinetAdmin писал(а): у места сообщения (именно сообщение, без кнопок и времени и тд) есть параметр overflow: hidden;, т.е. всё что выходит за границу сообщения просто не видно.
так и будет.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 14 ноя 2017, 16:42 Сообщение

Все. Заработало! И на винде, и на гаджетах Apple. Не смог проверить только на гаджетах Samsung (у меня их просто нет). Моя, одна довольно глупая ошибка, привела к проблеме. Сейчас все как на вашем примере (на второй странице) — подсказка сверху, как положено. Только фон поменял под свой. Единственно, что надо будет учитывать что нельзя ставить ее в самом начале текста или в верхней строке, но обычно так не бывает.
  • 0

ПитерПетр 14 ноя 2017, 19:04 Сообщение

Единственная просьба.
Как изменить "замену HTML", чтобы подсказка сразу была красного цвета, и в верхнем регистре.
  • 0

CabinetAdmin 14 ноя 2017, 20:03 Сообщение

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

.tooltip2 {
	display: inline-block;
	position: relative;
	cursor: help;
}
заменить на:

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

.tooltip2 {
	display: inline-block;
	position: relative;
	cursor: help;
	color: #FF0000;
	vertical-align: super;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

Я наверное неправильно объяснил. Красный текст (и верхнем регистре) только для, условно говоря, звездочки, Для самого знака, что есть примечание. То что видно в обычном режиме. А текст всплывающей подсказки (то что в всплывающей рамочке) должен остаться обычным.

Пытаюсь походу как то решить, чтобы все-таки это подсказка не обрезалась, так сказать, подручными средствами. "Сдвинуть " всплывающей" подсказки внутри bbcode вправо, вставляя бесцветные (вернее цвета фона) буквы. Не получиться такое дело. Внутри тэга, то есть после = любое типа , сбивает все. Наверное придется оставить так.
Впрочем нашел способ "обдурить"))) По крайнем мере, хотя бы слева. Конечно, не айс. Надо сверху, справа и слева, как то опускать ниже/сдвигать тексты. Но раз вариантов нет. то....Обычная подсказка спокойно выходить за пределы сообщения.

Помогите с проблемой описанной в первом абзаце и на этом можно закончить с этим bbcode!
Заранее благодарен!
  • 0

CabinetAdmin 15 ноя 2017, 15:55 Сообщение

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

.tooltip2 > span {
	position: absolute;
	bottom: 100%;
	left: -20em;
	right: -20em;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;
	max-width: 20em;
	max-height: 80vh;
	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 > span {
	position: absolute;
	bottom: 100%;
	left: -20em;
	right: -20em;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;
	max-width: 20em;
	max-height: 80vh;
	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;
	color: #333333;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы