Как реализовать всплывающую подсказку помимо свернутого меню

Question

Рассмотрим следующее свернутое боковое меню:

.collapsedSideMenu {
  height: 100%;
  width: 40px;
  background-color: grey;
  color: white;
  font-size: 12px;
  margin: 0px;
  padding: 0px;
}

.menuItem {
  display: flex;
  justify-content: center;
  padding: 8px;
  position: relative;
}

.menuItem:hover {
  background-color: blue;
  color: grey;
}

.menuTitle {
  position: absolute;
  display: flex;
  justify-content: center;
  padding: 8px;
  background-color: blue;
  color: grey;
}

<div class="collapsedSideMenu">
  <div class="menuItem">AB</div>
  <div class="menuTitle">Option AB</div>
  <div class="menuItem">CD</div>
  <div class="menuTitle">Option CD</div>
  <div class="menuItem">EF</div>
  <div class="menuTitle">Option EF</div>
</div>

Мне нужно показать заголовок (menuTitle) при наведении курсора мыши соответствующей опции (menuItem), показывая справа от свернутой option.

Что-то вроде:

| AB |
| CD | Option AB | << On hover over CD
| EF |

Как сделать это с помощью CSS / HTML?

Answer 1

Вы можете настроить свой код, как показано ниже:

.collapsedSideMenu {
  width: 40px;
  background-color: grey;
  color: white;
  font-size: 12px;
  position: relative;
}

.menuItem {
  text-align: center;
  padding: 8px;
}

.menuTitle {
  position: absolute;
  left:100%;
  white-space:nowrap;
  transform:translateY(-100%);
  display:none;
  padding: 8px;
  background-color: blue;
  color: grey;
}
.menuItem:hover + .menuTitle,
.menuTitle:hover{
  display:block;
}

<div class="collapsedSideMenu">
  <div class="menuItem">AB</div>
  <div class="menuTitle">Option AB</div>
  <div class="menuItem">CD</div>
  <div class="menuTitle">Option CD</div>
  <div class="menuItem">EF</div>
  <div class="menuTitle">Option EF</div>
</div>