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

идем в админку -> сообщения -> 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 15 июл 2021, 21:41 Сообщение

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

ПитерПетр 15 июл 2021, 21:49 Сообщение

Я имею ввиду новый, который получился в этой теме info=
<span class="tooltip2">{TEXT2} <span>{TEXT1}</span></span>
  • 0

CabinetAdmin 16 июл 2021, 11:48 Сообщение

В стилях найти:

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

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

ПитерПетр 16 июл 2021, 14:49 Сообщение

А чтобы еще размер этого значка немного уменьшить? Тоже в стиле или уже в HTML замене?
  • 0

CabinetAdmin 18 июл 2021, 16:19 Сообщение

Значок можно просто заменить на более большой. В том смысле, что заменить само изображение, обозвать тем же именем и заменить по тому же пути нахождения.

Но можно конечно и стилями. Стилями будет хуже, потому что увеличенное изображение будет расплывчатым.
Добавьте к стилям:

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

.tooltip2 img {
	width: auto;
	height: 12px;
}
12px любой свой размер. Ширина подгонится автоматически.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 29 июл 2021, 19:46 Сообщение

  А можно вообще избавиться от звездочки (или любого другого сообщения? На основе этого ббкода сделать чуть измененный. Идет обычный текст, затем слово, которое нуждается в примечании (в ббкоде прописать ему какой-то цвет, чтобы выделялось). То есть, практически тоже самое, но сейчас звёздочка (или любое другое изображение) в верхнем регистре. А нужно чтобы оно было как обычный текст (но как бы подсвеченный — типа обрати внимание на него. На него наводиться мышка и всплывает окошко с пояснением.
  • 0

ПитерПетр 31 июл 2021, 07:11 Сообщение

   Как просто перевести значок примечания в обычный регистр (у брать с верхнего)?
  • 0

ПитерПетр 01 авг 2021, 10:36 Сообщение

  Проще говоря пытаюсь сделать просто:
  Название (или любое слово нуждающееся в всплывающей подсказке) — обычный подчеркнутый текст с конкретным цветом) и при наведении на него мышкой — всплывающая подсказка. То есть немного измененный “info” (использует то же дополнение в стилях)
  Пытаюсь сделать по образцу bbcode “info” — не получается.
  • 0

CabinetAdmin 01 авг 2021, 14:52 Сообщение

За верхний регистр отвечает vertical-align: super; в стилях ббкода, если этот код удалить содержимое встанет на один уровень с текстом. Для подчёркивания используется text-decoration: underline;, для цвета color: #000000; соответственно, всё это применяется к .tooltip2.

Если нужно сделать второй, а существующий оставить как есть. То здесь, я надеюсь, понятно как действовать? Дублируем ббкод, чуть изменяем название, в замене меняем класс с tooltip2 на, допустим, tooltip3. Далее копируем уже существующие стили, меняем в классе 2 на 3 и вносим правки указанные мной чуть выше.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CabinetAdmin 01 авг 2021, 17:50 Сообщение

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

ПитерПетр 01 авг 2021, 17:54 Сообщение

  Я уже разобрался. Замена нужна была только в одном фрагменте стиля. Но сам tooltip2 то состоял не только с этого фрагмента. Нужно было полностью продублировать его и поменять на tooltip3
  Спасибо! Все что нужно было — получилось.
  • 0

ПитерПетр 01 авг 2021, 21:59 Сообщение

 Вот все супер. Единственное что есть из минусов (оно есть и в info), то что если слова, к которым нужны примечания находиться по краям или на верхних строках поста, то часть всплывающего окна (и естественно часть инфы в нем) “отрезаются”. В простом acronym, который использует встроенный стиль форума, такого нет. Есть возможность решить эту проблему?
  • 0

CabinetAdmin 02 авг 2021, 20:05 Сообщение

Обрезается из-за overflow: hidden;, и находится это свойство здесь:

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

.content {
	min-height: 3em;
	overflow: hidden;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #333333;
	padding-bottom: 1px;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 02 авг 2021, 21:32 Сообщение

Спасибо! Единственное где еще отрезает, если текст в скроллбаре. Тут возможно решение?
  • 0

CabinetAdmin 03 авг 2021, 19:51 Сообщение

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

Похожие темы