工具提示左下角位置 bootstrap4

debugcn 发表于 Dev

危机

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

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

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

关于闪烁问题，到目前为止我已经尝试过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解决方法不起作用。

危机

我真诚地希望有一个更简单的解决方案，但这对我有用。除了侦听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');
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。