Bootstrap 3 – Tooltip width

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.
bootstrap-3-tooltip-width-1
 

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

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

bootstrap-3-tooltip-width-2
 

Done =)

Reference: Tooltip-inner width issue

Advertisement

2 thoughts on “Bootstrap 3 – Tooltip width”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.