我無法使用jQuery更改工具提示引導位置

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

引導程序工具提示插件有一個「放置」選項，其控制一般位置（頂部，底部，左，右）的工具提示的，但它算出準確的在這個函數中的位置：

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 } 
} 

你可以重載這個函數來提供你自己的邏輯（也許通過添加一個'自定義'展示位置類型。請注意，插件除了設置css位置屬性外，還將位置類型作爲類應用於元素。這些類在setContent函數中被刪除，因此您必須調整該函數以刪除新的自定義佈局類型類。您可能還需要考慮其他問題/考慮事項 - 這不是一個簡單的選擇。但這將是一個有趣的項目，甚至可能值得拉請求:)

另一種方法是在引導插件完成後簡單地移動/覆蓋位置。有一個「顯示」事件可用，但它只在應用了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