Отрегулировать ширину подсказки Bootstrap

Question

Я использую всплывающие подсказки bootstrap версии 3 и JQuery на моей форме, которая имеет текстовые поля с разной шириной. Мне было интересно, есть ли способ настроить ширину всплывающей подсказки в соответствии с элементом, в котором он включен. i.e Я хотел бы, чтобы содержимое всплывающей подсказки отображалось в одной строке до тех пор, пока не будет достигнута ширина элемента. После того, как ширина всплывающей подсказки превышает элемент, который он включен, он должен автоматически отображать содержимое на следующей строке. Возможно ли это с помощью всплывающих подсказок?

$('#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

Я думаю, что ваша общая стратегия для этой проблемы является правильным, но вы застряли в tenchicality. После быстрого исследования, я предлагаю следующие статьи:

• 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

Это сказал, я не совсем уверен, что вы можете сделать это автоматически: вы бы должны знать и вычислять ширину элемента (что, если я изменю размер моего окна?).

Но мои ссылки показывают, что вы можете точно сделать это вручную. Таким образом, возможное решение состоит в том, чтобы иметь разные классы или файлы CSS для каждого размера, который вы планируете иметь. Не идеально, но он работает.

Надеюсь, я помог!

Answer 2

Надеюсь, я не опаздываю, когда будущие программисты ищут ответы. Есть такой вопрос, как этот. Перейдите по этой ссылке: How do you change the width and height of Twitter Bootstrap's tooltips?

Один из ответов очень полезен. На это ответил @knobli. Я не знаю, как связать ответ, но надеюсь, вы сможете перейти на эту страницу и проголосовать за нее. Во всяком случае, я просто скопирую его прямо здесь.

Для CSS:

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

Для HTML:

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

Просто добавьте данных контейнера = "тело" и вы готовы пойти.