Всплывающее изображение

[CabinetAdmin]

На вскидку:

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

<span class="tooltip-span">
	<span class="tooltip-span-item">{TEXT1}</span>
	<span class="tooltip-span-content">{TEXT2}</span>
</span>

и в стили добавить:

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

/* ToolTip Span */
.tooltip-span {
	display: inline;
	position: relative;
}

.tooltip-span-item {
	background: rgba(0,0,0,0.15);
	cursor: pointer;
	display: inline-block;
	padding: 0 10px;
}

.tooltip-span-content {
	position: absolute;
	z-index: 9999;
	width: 200px;
	height: 160px;
	left: 50%;
	margin: 0 0 20px -105px;
	padding: 2px;
	bottom: 100%;
	font-size: 0.765em;
	text-align: left;
	box-shadow: -5px -5px 15px rgba(48,54,61,0.2);
	background: #2a3035;
	color: #fff;
	opacity: 0;
	cursor: default;
	pointer-events: none;
}

.tooltip-span .tooltip-span-content {
	transform: translate3d(0,-10px,0);
	transition: opacity 0.3s, transform 0.3s;
}

.tooltip-span:hover .tooltip-span-content {
	pointer-events: auto;
	opacity: 1;
	transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}

.tooltip-span-content::after {
	content: '';
	top: 100%;
	left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2a3035;
	border-width: 10px;
	margin-left: -10px;
}

.tooltip-span-content img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

Размеры изображения здесь:
width: 200px;
height: 160px;

Использование можно придумать какое угодно, например:

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

[tooltip={TEXT1}]{TEXT2}[/tooltip]

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

[Питер]

Если я правильно понял, то текст1 — изображение, а текст 2 — строка. То есть в тексте1 прописать адрес, а текст2 — всю строку со всеми ббкодами (те, что относятся к строке) внутри? Честно говоря, трудно верится, что они не будут конфликтовать.

[CabinetAdmin]

Если так:

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

[tooltip={TEXT1}]{TEXT2}[/tooltip]

то:

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

[tooltip=текст]картинка[/tooltip]

Можно сделать так:

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

[tooltip={URL}]{TEXT}[/tooltip]

и замена:

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

<span class="tooltip-span">
	<span class="tooltip-span-item">{TEXT}</span>
	<span class="tooltip-span-content"><img src="{URL}" alt="" /></span>
</span>

т.е. без всяких дополнительных ббкодов, текст и ссылка на картинку.

[Питер]

CabinetAdmin, вы меня не правильно поняли. Мне именно нужно, чтобы в тексте работали все ббкоды, которые связаны с текстом. А при наведении курсора на текст, просто всплывало изображение. Просто меня смутило в вашем ответе, что все сработает. Если нужно, то скину вам в ЛС одну из таких строк (код)

[CabinetAdmin]

Ну, теперь не понял.

[Питер]

http://impossible-crimes.ru/Forum/viewt ... 900#p69900

Вроде разобрался. Но вот откуда появился этот фон (вроде темно-коричневый)? Вроде нигде в стилях не прописано. Нужно без фона, как выше (на примере)

[CabinetAdmin]

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

.tooltip-span-item {
	background: rgba(0,0,0,0.15);

[Питер]

Супер. Только один момент: после строки в этом коде и перед продолжением текста появляется пробел. Как его убрать?

[CabinetAdmin]

Там же: padding: 0 10px;

[Питер]

   А есть вариант, чтобы не строго фиксировать размер, а устанавливать только нужную высоту, а ширина сама пропорционально корректировалась? Дело в том, чтобы брать нужное изображение с инета (а там они обычно довольно большие) и устанавливать нужный мне размер. Сейчас ббкод просто отрезает часть от изображения.

[CabinetAdmin]

Можно и так.
Использование:

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

[tooltip={URL}|{NUMBER}]{TEXT}[/tooltip]

Замена:

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

<span class="tooltip-span">
	<span class="tooltip-span-item">{TEXT}</span>
	<span class="tooltip-span-content"><img src="{URL}" alt="" style="height: {NUMBER}px;" /></span>
</span>

Стили:

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

/* ToolTip Span */
.tooltip-span {
	display: inline;
	position: relative;
}
 
.tooltip-span-item {
	cursor: pointer;
	display: inline-block;
	padding: 0 1px;
}
 
.tooltip-span-content {
	position: absolute;
	z-index: 9999;
	left: 50%;
	margin: 0 0 20px -105px;
	padding: 2px;
	bottom: 100%;
	font-size: 0.765em;
	text-align: left;
	box-shadow: -5px -5px 15px rgba(48,54,61,0.2);
	background: #2a3035;
	color: #fff;
	opacity: 0;
	cursor: default;
	pointer-events: none;
}
 
.tooltip-span .tooltip-span-content {
	transform: translate3d(0,-10px,0);
	transition: opacity 0.3s, transform 0.3s;
}
 
.tooltip-span:hover .tooltip-span-content {
	pointer-events: auto;
	opacity: 1;
	transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}
 
.tooltip-span-content::after {
	content: '';
	top: 100%;
	left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2a3035;
	border-width: 10px;
	margin-left: -10px;
}
 
.tooltip-span-content img {
	position: relative;
	display: block;
	width: auto;
}

[Питер]

background: #2a3035 — это фон изображения
border-top-color — это маленький направляющий треугольник
Все это подправил на свой вкус.

А как добавить окантовку (рамку) в изображении? И в каком месте в скролле эту строку добавить?

[CabinetAdmin]

background: #2a3035; это не только фон, но и рамка, а padding: 2px; её толщина.

[Питер]

Это я знаю. Фон я специально делаю прозрачным, чтобы фон изображения "подстраивалось" в пост. Поэтому и спросил, как бы добавить в код еще и цвет для рамки (который совпал с border-top-color). Такая возможность есть?