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.