Como fazer com que as dicas de ferramentas do Twitter Bootstrap tenham várias linhas?

157

Atualmente, estou usando a função abaixo para criar texto que será exibido usando o plug-in de dica de ferramenta do Bootstrap. Como as dicas de ferramentas multilinhas funcionam apenas com  e não \n? Prefiro que não haja HTML nos atributos de título dos meus links.

O que funciona

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

O que eu quero

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

— Matthew Hui
fonte

1

Você entende a diferença entre \ n e em HTML?

— Cole Johnson

2

funcionará em html rendering lado, enquanto / n só exibirá seu código html em nova linha

— rajesh kakawat

Eu estava olhando para alguns outros sites e eles têm várias linhas tooltips sem a br

— Matthew Hui

265

Você pode usar white-space:pre-wrapna dica de ferramenta. Isso fará com que a dica de ferramenta respeite novas linhas. As linhas ainda serão quebradas se forem maiores que a largura máxima padrão do contêiner.

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

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

Se você deseja impedir que o texto seja quebrado, faça o seguinte.

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

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

Nenhum deles funcionará com a \nno html, eles devem realmente ser novas linhas reais. Como alternativa, você pode usar novas linhas codificadas , mas isso provavelmente é ainda menos desejável que o uso  de.

— Chad von Nau
fonte

1

Agora, como você faz isso com uma popover.

— Aaa90210

1

@ aaa90210 você poderia tentar .popover-content { white-space:pre-wrap; }. Dependendo do seu conteúdo, .popover-content p { white-space:pre-wrap; }ou algo semelhante, pode parecer melhor.

— Chad von Nau

É possível mostrar variáveis JSP em uma dica de ferramenta como esta? Eu tentei

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

. Mas fornece o seguinte: aaabbbccc (cadeias concatenadas).

— Zygimantus 04/11

1

.tooltip-inner {espaço em branco: pré-linha;} trabalhando para mim.

— Kishor K

pré-line funcionou para mim - todos os outros feitos texto não alinhar corretamente

— Adam Moisa

221

Você pode usar a propriedade 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

Você não marcou a Bootstrap 2.0.2 (js only)opção no seu jsFiddle, o que faz com que ele não funcione na execução inicial (aberta). Marque e salve-o, para que outros não cumpram, que seu exemplo não funcione.

— Trejder

56

Se você estiver usando a dica de ferramenta do Twitter Bootstrap no elemento não vinculado, poderá especificar que deseja uma dica de ferramenta com várias linhas diretamente no código HTML, sem Javascript, usando apenas o dataparâmetro:

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

Esta é apenas uma versão alternativa da resposta da costales . Toda a glória vai para ele! :]

— trejder
fonte

2

Por que você diz "elemento não vinculado"? Eu tentei isso em um link e parecia funcionar bem.

— precisa saber é o seguinte

2

Bem ... não me lembro! :] Depois de cinco meses, acho que estava errado. Eu também não sei, por que não deveria estar funcionando nos links. Desculpe ...

— trejder

1

Este funcionou para mim, especialmente se você estiver acionando dicas de ferramentas com javascript, isso será carregado no próprio elemento, obrigado!

— Leo

16

Se você estiver usando o Angular UI Bootstrap, poderá usar a dica de ferramenta com sintaxe html: tooltip-html-unsafe

por exemplo, atualização para angular 1.2.10 e angular-ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

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

— chakming
fonte

2

No Angular UI Bootstrap 0.13.X, tooltip-html-unsafe foi preterido. Agora você deve usar tooltip-html e $ sce.trustAsHtml () para realizar uma dica de ferramenta com 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>!');

— fuligem
fonte

0

A solução CSS para Angular Bootstrap é

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

Não é necessário usar um elemento pai ou seletor de classe, se você não precisar restringir seu uso. Copy / Pasta, e esta regra se aplicará a todos os subcomponentes

— Antonis
fonte