У меня есть Div и span внутри него. Я использую span в качестве элемента title. Поэтому он должен появляться только на: hover. Он отлично работает, используя класс hover.Центральная выровняйте дочерний абсолютный элемент с более чем родительской шириной
Но как я могу убедиться, что элемент span отображается точно в середине родителя, как показано ниже.
вместо
Пожалуйста, обратите внимание, что ширина диапазона элемента не фиксируется.
Просто добавьте left: 50% в свой демо (here updated)
.hasToolTip {
width: 30px;
height: 30px;
margin: 100px;
background-color: red;
position: relative;
}
.title {
visibility: hidden;
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap; /* so text don't break line when have space char */
}
.hasToolTip:hover .title {
visibility: visible;
}<div class="hasToolTip">
<span class="title">16753r2364</span>
</div>
<div class="hasToolTip">
<span class="title">16753r2364and then some</span>
</div>Вы можете просто применить transform, такие как transform: translateX(-50%). В преобразованиях% имеет сам элемент, а не родительский, как вы могли бы ожидать.
Это не работает для меня. Могу ли я изменить ссылку, пожалуйста, – Exception
Вы можете использовать flex и justify-content: space-around в вашем родительском элементе:
.hasToolTip {
width: 30px;
height: 30px;
margin: 100px;
background-color: red;
position: relative;
display: flex; /* add flex */
justify-content: space-around; /* add this */
}
.title {
visibility: hidden;
position: relative; /* change to relative */
top: -20px; /* decrease top a bit */
left: 0px;
white-space: nowrap; /* for scenarios with very long text with spaces */
}
.hasToolTip:hover .title {
visibility: visible;
}<div class="hasToolTip">
<span class="title">16753r2364</span>
</div>
<div class="hasToolTip">
<span class="title">16753asdasdasdasasdr2364</span>
</div>
<div class="hasToolTip">
<span class="title">16753asdasdasdasasdr2364 asdasdasdasdasdasdadas</span>
</div>Ссылки
Спасибо. Это супер круто. Но принял ниже, поскольку я не мог использовать ваше решение. – Exception
Вот ваше, что вы после этого, наведите курсор мыши на нижней DIV:
.hasToolTip {
width: 30px;
height: 30px;
margin: 100px;
background-color: red;
position:relative;
}
.title {
visibility: hidden;
top: -30px;
text-align:center;
position: absolute;
transform: translateX(-50%)
}
.hasToolTip:hover .title {
visibility: visible;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="hasToolTip">
<span class="title">16753r2364</span>
</div>
<div>
<div style='text-align:center'>
<div class="hasToolTip">
<span class="title">16753r2364</span>
</div>
</div>
</body>
</html>
Оба решения работает (ответы ниже), если поддержка браузера высока (как в supporing много старых браузеров), то используют не гибкий способ – Huangism