定位提示工具实例分享
导读：定位提示工具 以下实例中，提示工具显示在指定元素的右侧(left:105% 。 注意top:-5px同于定位在容器元素的中间。使用数字5因为提示文本的顶部和底部的内边距（padding）是5px。 如果你修改padding...
定位提示工具
以下实例中，提示工具显示在指定元素的右侧(left:105%)。
注意top:-5px同于定位在容器元素的中间。使用数字5因为提示文本的顶部和底部的内边距（padding）是5px。
如果你修改padding的值，top值也要对应修改，这样才可以确保它是居中对齐的。
在提示框显示在左边的情况也是这个原理。
显示在右侧：
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
显示在左侧：
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
如果你想要提示工具显示在头部和底部。我们需要使用margin-left属性，并设置为-60px。这个数字计算来源是使用宽度的一半来居中对齐，即：width/2(120/2=60)。
显示在头部：
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}
显示在底部：
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px;
/* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 定位提示工具实例分享
本文地址： https://pptw.com/jishu/664033.html