Since you want the tooltip at the right end of the element instead of centered on it you’ll need to manually set the offset based on the bar’s width:

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

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

This will need to be done every time the progress bar is updated, so if it’s dynamic you’ll need to update in a callback on whatever function updates the bar.

You can change the data-placement from “top” to “right”.

So I want to have a tooltip above my progress bar, I have a small tooltip, but it doesn’t work…

The thing I have now, looks like this:

But the tooltip needs to be above the white dot..

The HTML and CSS that I use:

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

Is a demo