Bootstrap tooltip need to be in single line

Question

I have created a tooltip using bootstrap for dropdown control. It shows the tooltip. But since this control is binded inside class="col-sm-4" tooltip text is broken to new lines. But I expect to show this in a single line. Any idea to make this?

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

Answer 1

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

Add this to your CSS after the Bootstrap CSS. However, using the hover on a right, even right auto, will be off screen on smaller viewports, but since smaller viewports are generally touch, hovers may make this require a double tap to work. I usually use a script to detect touch for IOS, Android, and Windows mobile and then only use the tooltip on no-touch devices, so this doesn't interfere with user taps.

Answer 2

Although Christina's answer works, it only patches the problem and may create other problems elswhere. In the bootstrap documentation it is mentioned this:

Tooltips in button groups, input groups, and tables require special setting When using tooltips on elements within a .btn-group or an .input-group, or on table-related elements, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

see Bootstrap docs

so all you need to do is add container: 'body' like so:

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

hope this helps