javascript - plugin - twitter embed api

¿Cómo hacer que la información sobre herramientas de arranque de Twitter tenga múltiples líneas?

Question

Actualmente estoy usando la función siguiente 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 con <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

Answer 1

En Angular UI Bootstrap 0.13.X, tooltip-html-unsafe ha quedado obsoleto. Ahora debe usar tooltip-html y $ sce.trustAsHtml () para realizar una información sobre herramientas 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>!'');

Answer 2

Puede usar white-space:pre-wrap la información sobre herramientas. Esto hará que la información sobre herramientas respete las nuevas líneas. Las líneas aún se envolverá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 /n en el html, en realidad deben ser nuevas líneas reales. Alternativamente, puede usar líneas nuevas codificadas 
 , pero eso es incluso menos deseable que usar las de.

Answer 3

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

Answer 4

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

<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 costales . Toda la gloria va a él! :]

Answer 5

Si usa Angular UI Bootstrap, puede usar la información sobre herramientas con la sintaxis html: tooltip-html-unsafe

por ejemplo, actualizar a angular 1.2.10 y angular-ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

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