Question

我无法使用jQuery更改工具提示引导位置。关于http://jsfiddle.net/2cast8g8/的示例
如果我在text1中输入一个更大的值，我的函数ck（）需要改变工具提示的位置。

还可以用jQuery改变工具提示的颜色吗？

<input type="text" id="text1" name="title" value=""  data-toggle="tooltip" data-placement="top"title="this need to be less">
<input type="text" id="text2" name="title" value=""  data-toggle="tooltip" data-placement="bottom"title="bigger ">

$('#text1').change(function () {
    ck()
});
$('#text2').change(function () {
    ck()
});

function ck() {
    text1 = document.getElementById("text1").value;
    text2 = document.getElementById("text2").value;
    if (Number(text1) > Number(text2)) {
        $("#text2").attr("data-original-title", "This value need to be bigger than ");
        $("#text1").attr("data-placement", "top");
        $(function () {
            $('#text2').tooltip('hide').tooltip('show');
        });
    } else {
        $("#text2").attr("data-original-title", "bigger");
    }
}
$(function () {
    $('[data-toggle="tooltip"]').tooltip('show')
})

Answer 1

$('body').tooltip({
    placement: function(tip, element) { 
        //code to calculate the position here, return values: "left", "right", "top", "bottom"
    },
    selector: '[data-toggle="tooltip"]'
});

Answer 2

Bootstrap工具提示插件有一个＆＃39;位置＆＃39;选项控制工具提示的一般位置（顶部，底部，左侧，右侧），但它会计算此功能中的确切位置：

Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2 } :
       placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
       placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
    /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
 }

您可以覆盖此功能以提供您自己的逻辑（可能通过添加＆＃39;自定义＆＃39;展示位置类型。请注意，除了设置css位置之外，插件还会将位置类型作为类应用于元素这些类已在setContent功能中删除，因此您必须调整该功能才能删除新的自定义展示位置类型。您可能还有其他问题/注意事项。＆＃39; d也必须考虑到 - 这不是一个简单的选择。但这将是一个有趣的项目，甚至可能值得拉取请求：）

另一种方法是在bootstrap插件完成后简单地移动/覆盖位置。有一个＆＃39;显示＆＃39;事件可用，但它仅在应用了css转换后触发，因此可能不合适。

示例可能是这样的（未经测试的代码）：

$('#text2').on('shown.bs.tooltip', function () {
  var left = $(this).css('left');
  $(this).css({
     left: left + 50
   });
})

您可能希望查看jQueryUI工具提示小部件 - 它具有更多用于定位工具提示的功能（包括添加自定义偏移）。 http://api.jqueryui.com/tooltip/#option-position

我无法使用jQuery更改工具提示引导位置

2 个答案: