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

Choirmaster

Can you provide some example markup of your textboxes? – Eury

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.

Aghast

Great CSS tip. Works for Vue Bootstrap's tooltips as well. – Cyrillic

I've seen the .tooltip-inner css before, but for me, the addition of the data-container was what helped to make the tooltips more flexible for the content. – Grateful

Answer 2

I think that your overall strategy for the problem is right, but you are stuck in a tenchicality. After a quick research, I suggest the following articles:

• How do you change the width and height of Twitter Bootstrap's tooltips?
• How to make Twitter bootstrap tooltips have multiple lines?
• how to do bootstrap tipsy tooltip multiline

This said, I am not entirely sure if you can do it automatically: you'd have to know and calculate the width of the element (what if I resize my window?).

But my links show you can for sure do it manually. Thus, a possible solution is to have different CSS classes or files for each size you plan on having. Not perfect, but it works.

Hope I helped!

Intracardiac