Отрегулируйте ширину всплывающей подсказки

Question

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

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

Я надеюсь, что я не опаздываю, чтобы отправить сообщение для будущих программистов, ищущих ответы. Есть такой вопрос. Перейдите по этой ссылке: Как изменить ширину и высоту всплывающих подсказок Twitter Bootstrap?

Один из ответов там очень полезен. На это ответил @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>

Просто добавьте data-container="body", и вы готовы к работе.

Answer 2

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

• Как вы меняете ширину и высоту всплывающих подсказок Twitter Bootstrap?
• Как сделать так, чтобы всплывающие подсказки в Twitter содержали несколько строк?
• как сделать загрузку подсказок

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

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

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