javascript - 如何将工具提示放在 div 下居中?
问题描述
如何在没有 Javascript 的情况下将工具提示居中并直接放在红色圆圈下方?先感谢您!:-)
这是我的问题的图像以及它应该在的标记位置:
我的代码目前如下所示:
HTML 代码:
<li>
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
</li>
CSS 代码:
#ovm-oup_under ul{
text-align: center;
list-style-type: none;
padding: 0;
}
#ovm-oup_under li{
padding: 20px;
margin: 15px;
display: inline-block;
}
.ovm-oup_under_item{
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0,0,0,.2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
top: 0%;
left: 50%;
z-index: 999;
}
解决方案
一种解决方案是将工具提示的绝对位置(相对于 parent div
)与工具提示上的平移转换相结合,这将实现所需的位置:
/* Extracted styling to top of style sheet to show the required additions */
.ovm-oup_tooltip span {
/* Offset the tooltip 50% from left side of parent (div) width
and 100% from top edge of parent height */
left: 50%;
top: 100%;
/* Pull the tooltip back 50% of it's own width, nudge the tool
tip downward 8px to account for arrow point */
transform: translate(-50%, 8px);
}
.ovm-oup_under_item {
/* Allow absolute placement of children (tooltip) */
position: relative;
}
/* Your existing styling starts here */
.ovm-oup_under_item {
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
/* Remove
top: 0%;
*/
left: 50%;
z-index: 999;
}
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
这里的想法是使用absolute
工具提示(即span
)的位置,将该跨度的左上角定位在水平中心和父 div 的底部边缘。然后使用该transform
规则相对于它自己的尺寸偏移工具提示span
,以实现最终的中心/基线放置。
您可以将上面的添加内容与您现有的样式合并 - 我将更改提取到样式表的顶部,以阐明为实现所需结果而进行的添加。希望有帮助!
推荐阅读
- html - 动画边框以相互跟随 css
- javascript - FullCalendar 对象不理解对象数组参数
- ios - 在 iPad 上横向使用时如何旋转 iPhone 应用程序
- python - sqlalchemy.exc.DatabaseError: (cx_Oracle.DatabaseError) DPI-1047: 找不到 64 位 Oracle 客户端库
- mysql - 如何从两个表中提取数据但使用一个偏移量和一个排序选项?
- java - 替代折旧的“setWiredHeadsetOn”来控制麦克风输入
- javascript - 回调内部的 HTTP 响应返回不起作用
- python - Pandas:如何检查数据框列中的任何列表是否存在于另一个数据框的范围内?
- php - 如何读取存储在数据库中的我的 php/txt 文件内容(在其中一个列中)并显示它?
- python - Tensorflow Eager 模式:GPU 上的首次执行速度慢