I can't change tooltip bootstrap position with jQuery

Question

I can't change tooltip bootstrap position with jQuery. Example on http://jsfiddle.net/2cast8g8/
If I enter a bigger value in text1 my function ck() need to change the position of tooltip.

Also it is possible to change the color of tooltip in red with 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

The Bootstrap tooltip plugin has a 'placement' option which controls the general position (top,bottom,left,right) of the tooltip, but it calculates the exact position in this function:

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

You could override this function to provide your own logic (perhaps by adding a 'custom' placement type. Note that the plugin applies the position type as a class to the element in addition to setting the css position properties. These classes are removed in the setContent function so you'd have to adjust that function to remove your new custom placement type class. It's likely there are other issues/considerations you'd have to account for as well - this wouldn't be a simple option. But it would be an interesting project and might even be worthy of a pull request :)

An alternative would be to simply move/override the position after the bootstrap plugin was done. There is a 'shown' event made available, but it is only triggered after the css transitions have been applied, so it may not suitable.

An example might be something like this (untested code):

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

You might want to look at the jQueryUI tooltip widget - it has more features for positioning the tooltip (including adding custom offsets). http://api.jqueryui.com/tooltip/#option-position