Come rendere le descrizioni dei bootstrap di Twitter hanno più linee?

157

Attualmente sto usando la seguente funzione per creare del testo che verrà visualizzato usando il plugin tooltip di Bootstrap. Come mai le descrizioni comandi multilinea funzionano solo con  e non \n? Preferisco che non ci sia HTML negli attributi del titolo dei miei link.

Cosa funziona

def tooltip(object)
  tooltip = ""
  object.each do |user|
    tooltip += "#{user.identifier}" + "<br>"
  end
  return tooltip
end

Quello che voglio

def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end

— Matthew Hui
fonte

1

Capisci la differenza tra \ n e in HTML?

— Cole Johnson,

2

funzionerà dal lato del rendering html, mentre / n mostrerà il tuo codice html solo in una nuova riga

— rajesh kakawat

Stavo guardando alcuni altri siti Web e hanno tooltip multilinea senza il br

— Matthew Hui,

265

È possibile utilizzare white-space:pre-wrapsulla descrizione comandi. Questo farà sì che la descrizione rispetti nuove linee. Le righe verranno comunque completate se sono più lunghe della larghezza massima predefinita del contenitore.

.tooltip-inner {
    white-space:pre-wrap;
}

http://jsfiddle.net/chad/TSZSL/52/

Se si desidera impedire il wrapping del testo, attenersi alla seguente procedura.

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

http://jsfiddle.net/chad/TSZSL/53/

Nessuno di questi funzionerà con un file \nHTML, in realtà devono essere delle nuove righe. In alternativa, puoi usare le nuove righe codificate , ma probabilmente è anche meno desiderabile che usare quelle di  .

— Chad von Nau
fonte

1

Ora come lo fai con un popover.

— aaa90210,

1

@ aaa90210 potresti provare .popover-content { white-space:pre-wrap; }. A seconda del contenuto .popover-content p { white-space:pre-wrap; }o di qualcosa di simile, potrebbe avere un aspetto migliore.

— Chad von Nau,

È possibile mostrare le variabili JSP in una descrizione comandi come questa? Ho provato

<a href="#" rel="tooltip" title="${aaa}                        ${bbb}                        ${ccc}"                        class="example">Show</a>

. Ma dà questo: aaabbbccc (stringhe concatenate).

— zygimantus,

1

.tooltip-inner {white-space: pre-line;} lavora per me.

— Kishor K,

pre-line ha funzionato per me - tutti gli altri hanno fatto in modo che il testo non fosse allineato correttamente

— Adam Moisa il

221

È possibile utilizzare la proprietà html: http://jsfiddle.net/UBr6c/

My <a href="#" title="This is a test... or not" class="my_tooltip">Tooltip</a> test.

$('.my_tooltip').tooltip({html: true})

— Costales
fonte

1

Non hai selezionato l' Bootstrap 2.0.2 (js only)opzione nella tua jsFiddle, che non funziona alla prima esecuzione (aperta). Contrassegna e salva, in modo che altri non rispettino, che il tuo esempio non funzioni.

— trejder,

56

Se stai usando Twitter Bootstrap Tooltip su un elemento non link, puoi specificare che vuoi un tooltip multilinea direttamente nel codice HTML, senza Javascript, usando solo il dataparametro:

<span rel="tooltip" data-html="true" data-original-title="1<br />2<br />3">5</span>

Questa è solo una versione alternativa della risposta dei costales . Tutta la gloria va a lui! :]

— trejder
fonte

2

Perché dici "elemento non link"? Ho provato questo su un link e sembrava funzionare bene.

— ec2011,

2

Beh ... non ricordo! :] Dopo cinque mesi, penso di aver sbagliato. Inoltre non so perché non dovrebbe funzionare sui collegamenti. Scusate ...

— Trejder,

1

Questo ha funzionato per me, specialmente se stai attivando tooltip con javascript, questo verrà caricato nell'elemento stesso, grazie!

— Leone,

16

Se si utilizza Bootstrap dell'interfaccia utente angolare, è possibile utilizzare la descrizione comando con sintassi html: tooltip-html-unsafe

ad es. aggiornamento angular 1.2.10 e angular-ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

vecchio: http://jsfiddle.net/8LMwz/1/

— chakming
fonte

2

In Angular UI Bootstrap 0.13.X, tooltip-html-unsafe è stato deprecato. Ora dovresti usare tooltip-html e $ sce.trustAsHtml () per realizzare una descrizione con html.

https://github.com/angular-ui/bootstrap/commit/e31fcf0fcb06580064d1e6375dbedb69f1c95f25

<a href="#" tooltip-html="htmlTooltip">Check me out!</a>

$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

— soote
fonte

0

La soluzione CSS per Angular Bootstrap è

::ng-deep .tooltip-inner {
  white-space: pre-wrap;
}

Non è necessario utilizzare un elemento genitore o un selettore di classe se non è necessario limitarne l'uso. Copia / Pasta e questa regola si applica a tutti i componenti secondari

— Antonis
fonte