¿Cómo hacer que la información sobre herramientas de Bootstrap de Twitter tenga varias líneas?

157

Actualmente estoy usando la siguiente función para crear texto que se mostrará con el complemento de información sobre herramientas de Bootstrap. ¿Cómo es que la información sobre herramientas multilínea solo funciona <br>y no \n? Prefiero que no haya ningún HTML en los atributos de título de mis enlaces.

Que funciona

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

Lo que quiero

def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end
javascript html css twitter-bootstrap Matthew Hui
fuente
1
¿Entiendes la diferencia entre \ n y <br/> en HTML?
Cole Johnson el
2
<br/> funcionará en el lado de representación html, mientras que / n solo mostrará su código html en una nueva línea
rajesh kakawat
Estaba mirando algunos otros sitios web y tienen información sobre herramientas de varias líneas sin el br
Matthew Hui

Respuestas:

265

Puede usar white-space:pre-wrapen la información sobre herramientas. Esto hará que la información sobre herramientas respete las nuevas líneas. Las líneas aún se ajustarán si son más largas que el ancho máximo predeterminado del contenedor.

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

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

Si desea evitar que el texto se ajuste, haga lo siguiente en su lugar.

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

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

Ninguno de estos funcionará con un \nen el html, en realidad deben ser nuevas líneas reales. Alternativamente, puede usar líneas nuevas codificadas &#013;, pero eso es probablemente incluso menos deseable que usar <br>'s.

Chad von Nau
fuente
1
Ahora, ¿cómo se hace eso con un popover?
aaa90210
1
@ aaa90210 podrías intentarlo .popover-content { white-space:pre-wrap; }. Dependiendo de su contenido, .popover-content p { white-space:pre-wrap; }o algo similar, podría verse mejor.
Chad von Nau
¿Es posible mostrar variables JSP en información sobre herramientas como esta? He tratado <a href="#" rel="tooltip" title="${aaa} ${bbb} ${ccc}" class="example">Show</a>. Pero da esto: aaabbbccc (cadenas concatenadas).
zygimantus
1
.tooltip-inner {white-space: pre-line;} trabajando para mí.
Kishor K
la pre-línea funcionó para mí - todos los demás hicieron que el texto no se alineara correctamente
Adam Moisa
221

Puede usar la propiedad html: http://jsfiddle.net/UBr6c/

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

$('.my_tooltip').tooltip({html: true})
Costales
fuente
1
No ha marcado la Bootstrap 2.0.2 (js only)opción en su jsFiddle, lo que hace que no funcione en la ejecución inicial (abierta). Marque y guárdelo, para que otros no cumplan, que su ejemplo no funcione.
trejder
56

Si está utilizando la información sobre herramientas de Bootstrap de Twitter en un elemento que no sea un enlace, puede especificar que desea una información sobre herramientas de varias líneas directamente en código HTML, sin Javascript, utilizando solo el dataparámetro:

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

Esta es solo una versión alternativa de la respuesta de los costales . ¡Toda la gloria va para él! :]

trejder
fuente
2
¿Por qué dices "elemento sin enlace"? Intenté esto en un enlace y parecía funcionar bien.
ec2011
2
Bueno ... no me acuerdo! :] Después de cinco meses, creo que me equivoqué. Tampoco sé por qué no debería funcionar en enlaces. Lo siento ...
trejder
1
Este funcionó para mí, especialmente si está activando información sobre herramientas con JavaScript, esto se cargará en el elemento en sí, ¡gracias!
Leo
0

La solución CSS para Angular Bootstrap es

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

No es necesario usar un elemento principal o un selector de clase si no necesita restringir su uso. Copiar / Pasta, y esta regla se aplicará a todos los subcomponentes.

Antonis
fuente