23

Il toolstrap Bootstrap allinea il testo al centro per impostazione predefinita. Mi piacerebbe allineare a sinistra. C'è un modo carino di farlo in HTML, invece di modificare il file CSS?Allineamento del testo nel suggerimento bootstrap

Ecco il mio codice di esempio:

<p rel="tooltip" title="Text in tooltip I want to align">Hover over here</p> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("p").tooltip(); 
    }); 
</script> 

ho già provato ma non ha funzionato:

<p rel="tooltip" data-html="true" title="<p align='left'>Text in tooltip</p>">Hover over here</p> 

risposta

10

Hai provato questo?

<style> 
.tooltip > p { 
    text-align:left; 
} 
</style> 

Inoltre, non penso che includendo il codice HTML nel titolo del tooltip. Che cosa si dovrebbe fare è:

$("p").tooltip({ 
    html: true, 
    title: '<p>Text in tooltip</p>' 
}); 

riferimento anche al paragrafo da p è una cattiva idea, come si potrebbe avere molti di loro nel documento. Fare riferimento da un id invece:

<p id="myparagraph"> Hover over here </p> 
$("#myparagraph") 
+0

.tooltip> p { text-align: left; } non è necessario. aggiungere align = "left" è sufficiente – Ruut

+2

align = "left" non è valido @ruut. –

+0

Per chiarire il commento di Donny, l'uso di 'align =" left "' in un tag HTML non è HTML5 valido. Il metodo HTML5 è il CSS descritto in questa risposta. – drewsberry

61

Per me in Bootstrap versione 2.2.2 le seguenti opere ben:

.tooltip-inner { 
    text-align: left; 
} 

Update: Questo funziona anche in Bootstrap 3.3.6.

+3

Funziona ancora bene con Bootstrap v3.1.1 – famousgarkin

+1

Anche senza '! Important' – famousgarkin

+0

Grandi opere. Contrassegnalo come la risposta corretta. –

1

Variazione quanto segue nel bootstrap.css (o bootstrap.min.css), funziona anche per v3

.tooltip-inner{ 
... 
text-align:center; //change to left 
... 
} 
+0

Non apportare mai modifiche direttamente a bootstrap.css, scrivi invece il tuo file css e includi questo dopo l'inclusione bootstrap. Ciò consentirà comunque di sovrascrivere il comportamento predefinito, ma ti permetterà di aggiornare il bootstrap in seguito senza perdere le sovrascritture manuali. – mtrolle

0

quando si desidera includere html in tooltip usando solo tooltip bootstrap (utilizzando i dati-html)

qui il codice:

<span data-toggle="tooltip" data-html="true" title="<p style='text-align:left'>Hello again<br/> this is tooltop</p>"> 
Problemi correlati