Question

我试图将输入字段工具提示放在左下角，以便它与输入字段完美对齐。不确定它是否重要但页面包含许多动态生成的输入字段。

尝试使用offset参数，但我认为在缩放内容方面有点麻烦，+11修正在提出一般解决方案时可能会很痛苦。< / p>

$('[data-toggle=tooltip]').tooltip({
    placement: "bottom",
    title: "test"
    offset: -$('#inputFieldId').width()/2 + 11
});

我也尝试修改transform类的.bs-tooltip-bottom样式，它的效果非常好！问题是工具提示在原始底部位置和新左下角位置之间闪烁一点。另外，我认为这可以做得更轻松，我只能弄清楚如何。

$('#inputFieldId').on('shown.bs.tooltip', function () {
    var x = $('#inputFieldId').offset().left;
    var y = $('#inputFieldId').offset().top + $('#inputFieldId').height();
    $('.bs-tooltip-bottom').css('transform', 'translate3d('+x+'px, '+y+'px, 0px)');
})

关于闪烁问题，到目前为止我尝试过的是在显示为0之前更改工具提示的opacity并在设置自定义转换时显示它。但它仍然闪烁着。

的CSS：

.tooltip.show {
   opacity: 0;
}

JS：

$('#inputFieldId').on('show.bs.tooltip', function () {
    $('.bs-tooltip-bottom').css('opacity', '0');
})

$('#inputFieldId').on('shown.bs.tooltip', function () {
    var x = $('#inputFieldId').offset().left;
    var y = $('#inputFieldId').offset().top + $('#inputFieldId').height();
    $('.bs-tooltip-bottom').css('transform', 'translate3d('+x+'px, '+y+'px, 0px)');
    $('.bs-tooltip-bottom').css('opacity', '0.9');
})

更新：

.bs-tooltip-bottom事件中show实际上并不存在，因此opacity解决方法无效。

Answer 1

我真诚地希望有一个更简单的解决方案，但这对我有用。除了inserted事件而不是show（inserted triggered show之后shown之后的所有事情，并且添加了css与在问题中说明。

css（可选）：

.tooltip.bs-tooltip-bottom, .tooltip.bs-tooltip-auto[x-placement^="bottom"] {
    margin-top: 10px;
}

JS：

$('#inputFieldId').on('inserted.bs.tooltip', function () {
    $('.bs-tooltip-bottom').css('opacity', '0');
});

$('#inputFieldId').on('shown.bs.tooltip', function () {
    var x = $(this).offset().left;
    var y = $(this).offset().top + $(this).height();

    $('.bs-tooltip-bottom').css('transform', 'translate3d('+x+'px, '+y+'px, 0px)');
    $('.bs-tooltip-bottom').css('opacity', '0.9');
});

Answer 2

为防止闪烁效果，请添加延迟以进行显示。

例如：

$('#inputFieldId').tooltip({delay: { "show": 140, "hide": 0 }});

要使闪烁完全消失，必须将节目延迟到至少140次。实际上也不需要更改不透明度。

   $('#inputFieldId').tooltip({delay: { "show": 140, "hide": 0 }});
   $('#inputFieldId').on('shown.bs.tooltip', function () {
        var x = $(this).offset().left;
        var y = $(this).offset().top + $(this).height();
   $('.bs-tooltip-bottom').css('transform', 'translate3d('+x+'px, '+y+'px, 0px)');
    });

工具提示左下方位置bootstrap4

2 个答案: