Тоже хорошая штучка. Смысл: выделенное слово через ббкод, наводим на него мышкой, получаем мышку с маленьким знаком вопроса и подсказку. Будет полезна тем, у кого на форуме просто уйма специфических слов, которые смогут понять не так много пользователей.
Что делаем:
идем в админку -> сообщения -> 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
Увы. В винде появился только маленький треугольники (как на вашем к примере, но самой подсказки (как и прямоугольника в котором написана подсказка) нет. А на МАКе все тоже самое, как писал выше: текст и подсказка словно написаны обычно, только слова переставлены.
Стили, темы и кеш, естественно обновил.
Стили, темы и кеш, естественно обновил.
Значит нет стилей. Не видит или на этом устройстве не обновляются стили и вы не видите результата. Ну раз не можете вы победить эту стилевую напасть, то как я уже раньше советовал - добавьте стили в ббкод, делов-то.
Я же специально выложил здесь пример, с кодом и стилями, для того чтобы убедиться, что код работает.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Код: Выделить всё
<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 /
, это у вас ломает стили и подсказка, вместо того чтобы показываться снизу текста, показывается далеко слева. Удалите оба комментария и должно будет заработать.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Еще раз, пожалуйста. Для "чайника".
Давайте так.
1. Что удалить (полностью) в content.css? Весь фрагмент
2. Что добавить (полностью) и каком месте в content.css? Весь фрагмент.
3. Я полностью удалил данный bbcode так как он вообще менял мне весь вид форума. Его надо ставить заново. Те есть, дайте мне полностью "Использование BBCode"; "Замена HTML" и "Подсказка".
Скажу честно. Понимаю, что я уже вас замучал. Сам себя неудобно чувствую. Но давайте уже закончим. Заранее спасибо!
Давайте так.
1. Что удалить (полностью) в content.css? Весь фрагмент
2. Что добавить (полностью) и каком месте в content.css? Весь фрагмент.
3. Я полностью удалил данный bbcode так как он вообще менял мне весь вид форума. Его надо ставить заново. Те есть, дайте мне полностью "Использование BBCode"; "Замена HTML" и "Подсказка".
Скажу честно. Понимаю, что я уже вас замучал. Сам себя неудобно чувствую. Но давайте уже закончим. Заранее спасибо!
Ну я же вроде написал что надо удалить... Ну ладно, давайте по новой..
Вариант номер раз
Добавить ббкод:
замена:
подсказка:
Открыть
и заменить на:
Вариант номер два
Добавить ббкод:
замена:
подсказка:
Открыть
Вариант номер раз
Добавить ббкод:
Код: Выделить всё
[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;
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Использовал первый вариант
Работает, но как то коряво.
Во-первых только на МАКе. (причем что классно, даже в айпаде) Но на винде видно только цифру и знак вопроса. Сама подсказка не появляется.
Во-вторых bbcode можно использовать только если слева и снизу от него есть достаточно текста. То есть "запас места" на всплывающую подсказку. Иначе, если слева от нее недостаточно текста, то видно только половина подсказки), если снизу нет места, то буквы "разрезаются" вдоль и видна только верхняя половина. Проще говоря, в таких случаях подсказке не хватает места))
Если это можно как то решить (иначе нет смысла с ней возиться), то
3. Как прописать "замену HTML" чтобы текст подсказки (как правило это номер (цифра) в квадратных скобках, красного цвета и в верхнем регистре.
Работает, но как то коряво.
Во-первых только на МАКе. (причем что классно, даже в айпаде) Но на винде видно только цифру и знак вопроса. Сама подсказка не появляется.
Во-вторых bbcode можно использовать только если слева и снизу от него есть достаточно текста. То есть "запас места" на всплывающую подсказку. Иначе, если слева от нее недостаточно текста, то видно только половина подсказки), если снизу нет места, то буквы "разрезаются" вдоль и видна только верхняя половина. Проще говоря, в таких случаях подсказке не хватает места))
Если это можно как то решить (иначе нет смысла с ней возиться), то
3. Как прописать "замену HTML" чтобы текст подсказки (как правило это номер (цифра) в квадратных скобках, красного цвета и в верхнем регистре.
Если всё-таки будете пытаться сделать, чтобы работало везде, то для информации — на айфоне тоже не работает. То есть частично. Видна цифра и если прикоснутся пальцем, то от подсказки виден только маленький треугольник. Даже странно. Обычно если работает на айподе, работает и на айфоне. У вас (на второй странице) в примере, подсказка корректно работает и на айфоне. Блин. что же неправильно делаю.
Все. Заработало! И на винде, и на гаджетах Apple. Не смог проверить только на гаджетах Samsung (у меня их просто нет). Моя, одна довольно глупая ошибка, привела к проблеме. Сейчас все как на вашем примере (на второй странице) — подсказка сверху, как положено. Только фон поменял под свой. Единственно, что надо будет учитывать что нельзя ставить ее в самом начале текста или в верхней строке, но обычно так не бывает.
Код: Выделить всё
.tooltip2 {
display: inline-block;
position: relative;
cursor: help;
}
Код: Выделить всё
.tooltip2 {
display: inline-block;
position: relative;
cursor: help;
color: #FF0000;
vertical-align: super;
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Я наверное неправильно объяснил. Красный текст (и верхнем регистре) только для, условно говоря, звездочки, Для самого знака, что есть примечание. То что видно в обычном режиме. А текст всплывающей подсказки (то что в всплывающей рамочке) должен остаться обычным.
Пытаюсь походу как то решить, чтобы все-таки это подсказка не обрезалась, так сказать, подручными средствами. "Сдвинуть " всплывающей" подсказки внутри bbcode вправо, вставляя бесцветные (вернее цвета фона) буквы. Не получиться такое дело. Внутри тэга, то есть после = любое типа , сбивает все. Наверное придется оставить так.
Впрочем нашел способ "обдурить"))) По крайнем мере, хотя бы слева. Конечно, не айс. Надо сверху, справа и слева, как то опускать ниже/сдвигать тексты. Но раз вариантов нет. то....Обычная подсказка спокойно выходить за пределы сообщения.
Помогите с проблемой описанной в первом абзаце и на этом можно закончить с этим bbcode!
Заранее благодарен!
Пытаюсь походу как то решить, чтобы все-таки это подсказка не обрезалась, так сказать, подручными средствами. "Сдвинуть " всплывающей" подсказки внутри bbcode вправо, вставляя бесцветные (вернее цвета фона) буквы. Не получиться такое дело. Внутри тэга, то есть после = любое типа , сбивает все. Наверное придется оставить так.
Впрочем нашел способ "обдурить"))) По крайнем мере, хотя бы слева. Конечно, не айс. Надо сверху, справа и слева, как то опускать ниже/сдвигать тексты. Но раз вариантов нет. то....Обычная подсказка спокойно выходить за пределы сообщения.
Помогите с проблемой описанной в первом абзаце и на этом можно закончить с этим bbcode!
Заранее благодарен!
Код: Выделить всё
.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;
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
{TEXT2}
{TEXT2} | + {TEXT1}
Стандартный BBcode скрытого текста. Хочу использовать его в качестве примечаний в тексте поста. То есть, во-первых... -
CabinetAdmin , приветствую!
Использование BBCode
{TEXT}
Замена HTML
Spoiler :
{TEXT}
Подсказка
Spoiler с паролем: СООБЩЕНИЕ... -
Здравствуйте.
Нужен простой ббкод для вставки youtube. Искал на просторах все не рабочие может у кого есть в наличии поделитесь пожалуйста.
Версия...