Search code examples
jquerytwitter-bootstraptooltip

How to position bootstrap tooltip when attach with inputs

With the below code I am attaching a bootstrap tooltip to a textbox. Now I would like to know how to position it on top or bottom, left and right?

In my case the tooltip is coming on top of the textbox but I want it to appear at the bottom.

var options = { 
    html: true, 
    title: '<div class="tooltip-alert alert-danger" data-placement="bottom">' + message + '</div>' 
};

$(inputElement).addClass('validation-error');
inputElement.tooltip("destroy").addClass("error").tooltip(options);
Solution

  • According to the documentation you need to set the placement option to achieve what you need. Try this:

    var options = { 
    html: true, 
    placement: 'bottom',
    title: '<div class="tooltip-alert alert-danger" data-placement="bottom">' + message + '</div>' 
};

$(inputElement)
    .addClass('validation-error error')
    .tooltip("destroy")
    .tooltip(options);