Как сделать два одновременных тултипа на один блок?

Question

[Korokolo]

Добрый день.
Вопрос такой. Есть блок. К нему создаю тултип. Но задача чтобы при наведении появлялось сразу два тултипа и в разных настроенных областях. Как это реализовать

Comments

[Вадим]

Добрый день.
Есть некое транспортное средство, перемещающееся в пространстве не стандартным способом.
К нему я создаю гипердвигатель.
Но задача чтобы при зажигании стартовал гипердвигатель и сопряжённого тягяча.
Как это реализовать?

<зануда>
Правила сервиса глаясят:

3.2. Формулировать вопрос максимально информативно и однозначно. Использование общих формулировок приводит к тому, что пользователи оказываются вынуждены тратить время на ознакомление с вопросом, хотя он может быть заведомо им не интересен. Поэтому, вместо общих формулировок (например, «Где найти драйвер на принтер?»), следует использовать максимально детальные формулировки (например, «Где найти драйвер на EPSON L110 под Linux Mint 18.1 Cinnamon?»).

3.8. Использовать для демонстрации фрагментов кода только специальный тег <code> или специальные демонстрационные ресурсы (например, JsFiddle - https://jsfiddle.net/). Размещение фрагментов кода в виде изображений запрещено.

</зануда>

[Ankhena]

Нужно поменять + на ~ в селекторе.

Но из вопроса сложно делать выводы, что вы делали и что не получается. Уточните, позовёте.

[Korokolo]

HTML

БЛОК
СОДЕРЖАНИЕ ТУЛТИПА:


CSS
#tooltip9{
display: inline-block;
position: relative;
background-color: #888a8b;
color: white;
width: 100%;
text-align: center;
border-color: white;
border-style: solid;
border-width:0px 0px 0.00001px 0px
}
media screen and (max-width: 780px){#tooltip9{
display: inline-block;
position: relative;
background-color: #888a8b;
color: black;
width: 100%;
text-align: center;
}}
#tooltip9 #tooltiptext9{
visibility: hidden;
width: 317%;
color: black;
border-radius: 1px;
padding: 15px 15px 15px 35px;
text-align: left;
position: absolute;
z-index: 100;
top:0%;
left: 200.5%;
margin-left: -100%;
background-color:#FFFFFF;
column-count: 3;
box-shadow: 0 0 0 100vh #9D999980;}

media screen and (max-width: 780px){#tooltip9 #tooltiptext9{
visibility: hidden;
display: none;
}}
#tooltip9 #tooltiptext9::after {
left: 11%;
margin-left: -5%;
content: " ";
position: absolute;
top: 7px;
left: 5%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 19px;
border-style: solid;
border-color: transparent transparent transparent #888a8b;}

media screen and (max-width: 780px){#tooltip9 #tooltiptext9::after {content: " ";
position: absolute;
top: 1%; /* At the bottom of the tooltip */
left: 1%;
margin-left: -5px;
border-width: 20px 161px 1px 161px ;
border-style: solid;
border-color: black transparent transparent
transparent;}}
#tooltip9:hover #tooltiptext9 {
visibility: visible
}

Вот сейчас при наведении на блок появляется справа тултип с информацией. Суть собственно в чем. Этот тултип с тенью. Эта тень в свою очередь перекрывает блок.
Мне нужно чтобы блок был виден четко и не покрыт этой тенью. Я вижу выход в виде создания дополнительного тултипа который будет перекрывать блок поверх тени от первого существующего тултипа. Если есть вариант то как мне может сделать чтобы при наведении данный блок может становился выше тултипа по слою .

[Korokolo]

Вадим, Добавил CSS

[Korokolo]

Ankhena, добавил css

[Ankhena]

Korokolo,

добавил css

Вы сами-то видели как выглядит то, что вы добавили?

Нормально оформите песочницу на jsfiddle.net или аналоге, так чтобы было всё видно и понятно.

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

А вот это с картинками. Потому что по описанию это дичь какая-то.