Say i have the following text field which i would like to show the tooltip on the right.

<input type="text" class="form-control" name="nickname" rel="txtTooltip" title="tooltip text" data-toggle="tooltip" data-placement="right"/>

 

Let’s invoke the tooltip in Javascript as follow:

$('input[rel="txtTooltip"]').tooltip();

 

The tooltip above has a limited width.

 

To fix the width problem, use the following code instead.

$('input[rel="txtTooltip"]').tooltip({
  container: 'body'
});

 

Done =)

Reference: Tooltip-inner width issue