BBcode подсказка

BBCode — это специальный вариант HTML
С помощью BBcode - вы сможете отформатировать текст в сообщении, вставить видео, картинки и многое другое.
Питер

BBcode подсказка

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

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

Аватара пользователя
CabinetAdmin

BBcode подсказка

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

Питер писал(а):Источник цитаты текст и подсказка словно написаны обычно

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

Я же специально выложил здесь пример, с кодом и стилями, для того чтобы убедиться, что код работает.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBcode подсказка

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

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

Питер

BBcode подсказка

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

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

Аватара пользователя
CabinetAdmin

BBcode подсказка

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 /, это у вас ломает стили и подсказка, вместо того чтобы показываться снизу текста, показывается далеко слева. Удалите оба комментария и должно будет заработать.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBcode подсказка

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

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

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

Аватара пользователя
CabinetAdmin

BBcode подсказка

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; }
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBcode подсказка

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

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

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

Питер

BBcode подсказка

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

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

Аватара пользователя
CabinetAdmin

BBcode подсказка

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

Питер писал(а):Источник цитаты Если это можно как то решить

Я уже писал:
CabinetAdmin писал(а):Источник цитаты у места сообщения (именно сообщение, без кнопок и времени и тд) есть параметр overflow: hidden;, т.е. всё что выходит за границу сообщения просто не видно.

так и будет.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBcode подсказка

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

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

Питер

BBcode подсказка

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

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

Аватара пользователя
CabinetAdmin

BBcode подсказка

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; }
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBcode подсказка

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

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

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

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

Аватара пользователя
CabinetAdmin

BBcode подсказка

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; }
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «Пользовательские BBCode для phpBB»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость