如何使底部工具提示与其元素的右端对齐？

Question

所以我想在我的进度条上方有一个工具提示，我有一个小工具提示，但它不起作用......

我现在拥有的东西，看起来像这样：

但是工具提示需要在白点上方..

我使用的 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

是演示

Answer 1

由于您希望工具提示位于元素的右端而不是居中，因此您需要根据条的宽度手动设置偏移量：

let offset = $('.progress-bar').width();

$('.popOver').tooltip({
    trigger: 'manual',
    offset: offset
}).tooltip('show');

每次更新进度条时都需要执行此操作，因此如果它是动态的，则需要在更新进度条的任何函数的回调中进行更新。

Answer 2

您可以将数据放置从“顶部”更改为“右侧”。