Как я могу держать нижнюю подсказку выровненной по правому концу ее элемента? - PullRequest
Новая
       4

Как я могу держать нижнюю подсказку выровненной по правому концу ее элемента?

1 голос
/ 28 января 2020

Итак, я хочу, чтобы над моим индикатором выполнения была всплывающая подсказка, у меня есть небольшая подсказка, но она не работает ...

То, что у меня сейчас есть, выглядит так:

My thing

Но подсказка должна быть выше белой точки ..

Используемые мной 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

Это демонстрационная версия

Ответы [ 2 ]

1 голос
/ 28 января 2020

Поскольку вы хотите, чтобы всплывающая подсказка находилась справа от элемента, а не по центру, вам необходимо вручную установить смещение в зависимости от ширины стержня: 

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

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

Это необходимо сделать каждый раз, когда индикатор выполнения обновляется, поэтому, если он динамический c, вам потребуется обновить в обратном вызове любую функцию, обновляющую панель.

0 голосов
/ 28 января 2020

Вы можете изменить размещение данных с «верхнего» на «правое».

...