На случай если нужно добавить то, чего нет на сайте.
1180x609Ver.1「BBcode ver.1」[div=characters-container cc-8-g0]
[div=character-poster c-column b-catalog_entry c-character]
[div=tooltip minified][div=tooltip-inner][div=clearfix][div=close][/div]
[div=tooltip-details][div=b-catalog_entry-tooltip][div=entry-tooltip_container][div=inner p0]
[div=line][url=ссылка не ресурс с персонажем data name]Имя персонажа[/url][/div]
[div=additional-images][div=link][div=title]Тип произведения[/div]
[url=ссылка на произведение][poster]ссылка на изображение произведения[/poster][/url][/div][/div]
[div=text]Описание/Характеристика персонажа[/div][/div][/div][/div][/div][/div][/div][/div]
[url=ссылка на ресурс cover][div=image-decor][div=image-cutter][poster]ссылка на картинку[/poster]
[/div][/div][/url][/div]
[/div]
Ver.2「BBcode ver.2」[div=characters-container cc-8-g15]
[div=character-poster c-column b-catalog_entry c-character]
[div=tooltip minified][div=tooltip-inner][div=clearfix][div=close][/div]
[div=tooltip-details][div=b-catalog_entry-tooltip][div=entry-tooltip_container][div=inner p0]
[div=line][url=ссылка не ресурс с персонажем data name]Имя персонажа[/url][/div]
[div=additional-images][div=link][div=title]Тип произведения[/div]
[url=ссылка на произведение][poster]ссылка на изображение произведения[/poster][/url][/div][/div]
[div=text]Описание/Характеристика персонажа[/div][/div][/div][/div][/div][/div][/div][/div]
[url=ссылка на ресурс cover][div=image-decor][div=image-cutter][poster]ссылка на картинку[/poster]
[/div][/div][div=title two_lined]Имя персонажа[/div][/url][/div]
[/div]
「Общий CSS(важно!)」.characters-container .tooltip {
display: none;
}
.characters-container .tooltip-inner {
margin-top: -2.5rem;
}
.character-poster:hover .tooltip, .character-poster-left:hover .tooltip {
display: inline-flex;
top: 0;
right: 0;
bottom: 0;
margin-right: -1.2rem;
}
.character-poster-left:hover .tooltip {
left: 0;
margin-left: -1.2rem;
margin-right: 0;
right: auto;
}
.character-poster-left .tooltip-inner {
left: -20rem;
}
-----------------------------
P.s. Для левостороннего отображения тултипа просто прописать
-left
к
[div=character-poster]
Новых персонажей добавлять в контейнер используя только
[div=character-poster]
При указании ссылки на ресурс с персонажем, обязательно оставлять место для классов
data name
и
cover
. Если ссылки нет, то можно и без неё.
P.p.s. Можно подобное дело провернуть и с произведениями (например совершить невозможное - оформить визуалку), только придётся править уже сам tooltip, добавляя куча значений особенно для жанров (O_O;)