javascript - 如何保持底部工具提示与其元素的右端对齐?
问题描述
所以我想在我的进度条上方有一个工具提示,我有一个小工具提示,但它不起作用......
我现在拥有的东西是这样的:
但是工具提示需要在白点上方..
我使用的 HTML 和 CSS:
HTML:
<div class="progress">
<div class="progress-bar popOver" data-toggle="tooltip" data-placement="top" title="472 km"
role="progressbar" aria-valuenow="48.5" aria-valuemin="0" aria-valuemax="100" style="width:48.5%">
</div>
</div>
CSS:
.progress {
height: 8px;
border-radius: 9.5px;
.progress-bar {
background-color: #ec4124;
border-radius: 5px;
}
// The white dot at the end of the progress bar
&::after {
content: "";
width: 6px;
height: 6px;
position: relative;
border-radius: 100%;
right: 8px;
top: 1px;
background-color: $white;
}
}
.tooltip > .tooltip-inner {
background-color: $white;
padding: 11px 16px;
color: $red;
font-family: Config, sans-serif;
font-size: 18px;
font-weight: 800;
font-stretch: condensed;
font-style: italic;
line-height: 1.33;
letter-spacing: normal;
text-align: center;
opacity: 1;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before {
top: 0;
border-width: 0.4rem 0.4rem 0;
border-top-color: #fff;
}
https://www.codeply.com/p/i2jzeg1q4m
是一个演示
解决方案
由于您希望工具提示位于元素的右端而不是居中,因此您需要根据栏的宽度手动设置偏移量:
let offset = $('.progress-bar').width();
$('.popOver').tooltip({
trigger: 'manual',
offset: offset
}).tooltip('show');
每次更新进度条时都需要执行此操作,因此如果它是动态的,则需要在回调中更新任何更新进度条的函数。
推荐阅读
- azure-data-factory - 如何对基于 Azure 数据工厂的管道进行冒烟测试
- java - dockerBuild 失败导致不支持的类文件主要版本 61 错误
- c++ - 参数相关查找如何在搜索点之后找到声明?
- woocommerce - WooCommerce 检查购物车的优惠券
- c# - 我有一个位数不确定的bool数组,如何将它转换成一个短数组,每个bool值是一个位
- python - 如何使用 sklearn 加快核密度估计?
- windows-10 - 为什么8080端口被文件资源管理器占用?
- flutter - 如何在 ScrollablePositionedList 颤振中添加上拉刷新
- python - 防止 PyCharm 弹出框出现在光标上方
- transactions - IBM XMS:CommittableTransaction() 与会话事务,它们中的任何一个都是全局的吗?