Il tooltip Bootstrap deve essere in linea singola

Question

Ho creato un suggerimento usando bootstrap per il controllo a discesa. Mostra il suggerimento. Ma dal momento che questo controllo è vincolato all'interno del testo del suggerimento class="col-sm-4" alle nuove righe. Ma mi aspetto di mostrarlo in una sola riga. Qualche idea per farlo?

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

aggiungere questo alla tua CSS dopo la Bootstrap CSS. Tuttavia, usando il passaggio del mouse su un auto a destra, anche a destra, sarà fuori dallo schermo su finestre più piccole, ma dal momento che le finestre più piccole sono generalmente a sfioramento, le alette potrebbero rendere necessario un doppio tocco per funzionare. Di solito uso uno script per rilevare il tocco per IOS, Android e Windows mobile e quindi utilizzare solo la descrizione dei comandi sui dispositivi no-touch, quindi questo non interferisce con i tocchi dell'utente.

Answer 2

Sebbene la risposta di Christina funzioni, risolve solo il problema e potrebbe creare altri problemi altrove. Nella documentazione bootstrap è citato questo:

Tooltips in gruppi di pulsanti, gruppi di ingresso e tabelle special richiede modificando Usando i suggerimenti su elementi di un .btn gruppo o un .input-gruppo, o sul tavolo -related elements, devi specificare l'opzione container: 'body' per evitare effetti collaterali indesiderati (come l'elemento che si allarga e/o che perde gli angoli arrotondati quando viene attivato il tooltip).

vedere Bootstrap docs

quindi tutto quello che dovete fare è aggiungere container: 'body' in questo modo:

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

speranza che questo aiuta