如何将工具提示集中在jquery ui-slider上

Question

我正在使用我添加了工具提示的jquery ui-slider。

以下是它的外观：

通过在滑块手柄中插入DIV来添加工具提示。

function sliderCreate(desc) {

    var tooltip = $('<div class="ui-slider-tooltip">' + desc + '</div>');

    $(this).find('.ui-slider-handle').append(tooltip);
}

如您所见，工具提示当前与左手柄边缘对齐。当把手移动到滑块的右侧时，这是一个问题。

.ui-slider-tooltip
{
    .BorderRadius(0.3rem);
    background-color:@dkBlueBG;
    color:#fff;
    line-height:1;
    padding:0.3rem;
    position:absolute;
    left:0;
    bottom:2.9rem;
    white-space:nowrap;
}

我正在寻找：

• 使工具提示居中以减少悬垂;
• 移动滑块移过中途标记时将工具提示的位置移动（将其对齐到右边缘）

任何帮助都将不胜感激。

Answer 1

使工具提示居中......

.ui-slider-tooltip
{
    .BorderRadius(0.3rem);
    background-color:@dkBlueBG;
    color:#fff;
    line-height:1;
    padding:0.3rem;
    position:absolute;

    left:50%;
    transform:translateX(-50%); /* add your prefixes as required */

    bottom:2.9rem;
    white-space:nowrap;
}

当滑块移过中间标记（将其对齐到右边缘）时移动工具提示的位置需要额外的JS / JQ来确定滑块值是否大于50％然后更改CSS