Всплывающая подсказка Bootstrap должна быть в одной строке

Я создал всплывающую подсказку, используя bootstrap для выпадающего меню. Он показывает всплывающую подсказку. Но поскольку этот элемент управления привязан внутри class="col-sm-4", текст всплывающей подсказки разбивается на новые строки. Но я ожидаю показать это в одной строке. Любая идея сделать это?

<div class="col-sm-4">
                <select class="form-control" id="ddlSchoolAttended" data-toggle="tooltip" data-placement="right" title="Some tooltip 2!Some tooltip 2!Some ">
          <option value="08">08 -Year 8 or below</option>
    <option value="09">09 -Year 9 or equivalent</option>
    <option value="10">10 -Completed Year 10</option>
    <option value="11">11 -Completed Year 11</option>
    <option value="12">12 -Completed Year 12</option>
    <option selected="selected" value="">--Not Specified--</option>
          </select><br/>
</div>

Ответ 1

.tooltip-inner {
  white-space:nowrap;
  max-width:none;
}

Добавьте это в свой CSS после Bootstrap CSS. Однако, используя зависание справа, даже авто справа, будет выключен экран на небольших видовых экранах, но поскольку меньшие видовые экраны, как правило, касаются друг друга, зависания могут заставить это работать с двойным нажатием. Обычно я использую script для обнаружения касания для мобильных устройств IOS, Android и Windows, а затем используйте всплывающую подсказку на устройствах без касания, так что это не мешает пользователям.

Ответ 2

Хотя ответ Кристины работает, он только исправляет проблему и может создавать другие проблемы в любом месте. В документации к бутстрапу упоминается следующее:

Подсказки в группах кнопок, группах ввода и таблицах требуют специальной настройки При использовании всплывающих подсказок на элементах в группе .btn или в группе -in-group или на элементах, связанных с таблицей, вам нужно указать опцию container: 'body', чтобы избежать нежелательных побочных эффектов (таких как расширяющийся элемент и/или потерять закругленные углы при срабатывании всплывающей подсказки).

см. Документы Bootstrap

так что все, что вам нужно сделать, это добавить container: 'body' так:

$(function () {
    $('[data-toggle="tooltip"]').tooltip({container: 'body'})}
);

надеюсь, что это поможет