工具提示左下位置 bootstrap4

Question

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

尝试使用 offset 参数，但我认为它在缩放内容时有点错误，并且在提出通用解决方案时，+11 更正可能会很痛苦。

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

我还尝试修改.bs-tooltip-bottom 类的transform 样式，效果非常好！问题是工具提示在原始底部位置和新的左下位置之间闪烁了一下。另外，我认为这可以更容易完成，我只是不知道如何。

$('#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)');
})

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

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)');
    });