Adjust Bootstrap Tooltip Width

Question

I am using bootstrap tooltips version 3 and JQuery on my form which has textboxes with different widths. I was wondering if there is a way to adjust the width of the tooltip according to the element it is on. i.e I would like the tooltip content to display in a single line until the width of the element is reached. Once the tooltip width exceeds the element it is on then it should automatically display the content on the next line. Is this possible using bootstrap tooltips?

 $('#myTextBox1').tooltip();
 $('#myTextBox2').tooltip();

HTML:

<input type="text" id="#myTextBox1" class="textBox1" data-placement="top" title="tooltip on first input to check if the width adjusts to the width of the text box!" />
<input type="text" id="#myTextBox2" class="textBox2" data-placement="top" title="tooltip on second input!" />    

CSS:

    .textBox1 {
     width:200px;
     height:40px;
}

    .textBox2 {
     width:300px;
     height:40px;
}

Answer 1

I hope I'm not too late to post this for future programmers looking for answers. There's a question like this one. Go to this link: How do you change the width and height of Twitter Bootstrap's tooltips?

One of the answers there is very useful. It was answered by @knobli. I don't know how to link the answer but I hope you can go to that page and vote it up. Anyway, I'll just copy it right here.

For CSS:

.tooltip-inner {
    max-width: 100% !important;
}

For HTML:

<a href="#" data-toggle="tooltip" data-placement="right" data-container="body" title="" data-original-title="Insert Title">Insert Title</a>

Just add data-container="body" and you're ready to go.