Такцю задачу обычно решают с использованием Javascript, но мне хотелось попробовать обойтись без него. Оказалось очень просто и я поставил ещё ряд анимаций, чтобы усложнить задачу. Все равно не сложно. Анимации, надо сказать, по-прежнему работают более гладко и плавно на чистом CSS.
ul {
list-style: none;
}
li {
display:inline-block;
margin-right: 20px;
border: 1px solid #fff;
}
.tooltip {
display: block;
height: 60px;
width: 200px;
background: #A9D59D;
color: #fff;
text-align: center;
position: relative;
}
.tooltip span,
.tooltip span > em,
.tooltip span > i {
display: block;
line-height: 60px;
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: top 0.6s;
}
.tooltip span {
top: 0;
overflow: hidden;
}
.tooltip span em {
top: 0;
}
.tooltip span i {
top: 100%;
}
.tooltip:hover span > em {
top: -100%;
}
.tooltip:hover span > i {
top: 0
}
.tooltip::before,
.tooltip::after {
position: absolute;
display: block;
opacity: 0;
visibility: hidden;
}
.tooltip::before {
content: attr(data-tooltip);
width: 120px;
height: 60px;
line-height: 60px;
top: -80px;
left: calc(50% - 60px);
background: #E1A9A3;
transform: scaleY(0);
transition: transform 1s ease-in-out;
}
.tooltip::after {
content: '';
width: 0;
height: 0;
top: -20px;
left: calc(50% - 10px);
border: 10px solid transparent;
border-top-color: #E1A9A3;
transition: opacity 0.4s linear 1s;
}
.tooltip:hover::before {
transform: scaleY(1);
}
.tooltip:hover::after,
.tooltip:hover::before {
opacity: 1;
visibility: visible;
}