Como posso usar um retorno de carro em uma dica de ferramenta HTML?

330

Atualmente, estou adicionando dicas de ferramentas detalhadas ao nosso site e gostaria (sem precisar recorrer a um plug-in jQuery whiz-bang, eu sei que existem muitas!) Para usar retornos de carro para formatar a dica de ferramenta.

Para adicionar a dica, estou usando o titleatributo Examinei os sites habituais e usando o modelo básico de:

<a title='Tool?Tip?On?New?Line'>link with tip</a>

Eu tentei substituir o ?por:

  • <br />
  • &013; / &#13;
  • \r\n
  • Environment.NewLine (Eu estou usando c #)

Nenhuma das opções acima funciona. É possível?

penderi
fonte
É bastante complicado, mas pode haver uma solução alternativa. Mude todos os espaços do seu título para um espaço sem quebra &nbsp;. Em seguida, coloque espaços onde deseja que as quebras de linha. Você também pode precisar adicionar vários &nbsp;caracteres antes do seu espaço (quebra de linha).
jumxozizi

Respostas:

292

É tão simples que você vai se chutar ... basta pressionar enter!

<a title='Tool
Tip
On
New
Line'>link with tip</a>

O Firefox não exibirá dicas de ferramentas de várias linhas - ele substituirá as novas linhas por nada.

Greg
fonte
69
Esta resposta ultrapassada, o Firefox faz novas linhas de exibição em títulos agora (estou usando v25). Trabalha com \n, \u000Ae \x0A.
Halcyon
1
@ Halcyon, apenas para esclarecer para outros leitores, os três códigos acima não parecem ser HTML. Eles se parecem mais com seqüências de escape de string de linguagem derivada de C.
Sam
3
@ Sam Eu não entendo o que você quer dizer com isso. \x0A(byte) é o código de caractere que corresponde a uma nova linha. O mesmo para \u000A(unicode). \ntambém é nova linha.
Halcyon
13
@ Halcyon, tentei inserir essas seqüências de escape em um titleatributo no Firefox e Chrome, e elas foram apresentadas literalmente na dica de ferramenta. Depois, percebi que você provavelmente estava usando essa sintaxe como uma maneira de comunicar quais caracteres (não sequências de escape) devem ser usados. Meu comentário é para economizar tempo de outras pessoas, avisando-as para não tentarem colocar suas seqüências de escape em HTML para que elas não percam tempo como eu.
Sam
4
@Tarquin Eles não funcionam em HTML, apenas funcionam especificamente entre aspas duplas do PHP, porque esse é um recurso das aspas duplas do PHP.
Brilliand
307

A mais recente especificação permite caractere de alimentação de linha, então um simples quebra de linha dentro do atributo ou entidade &#10;(note que os caracteres #e ;são obrigatórios) estão OK.

Kornel
fonte
4
não é suportado pelo Chrome, mas sim para o Firefox!
Alaeddine
5
Eu tentei os dois &#10;e &#13;. &#13;não honraria as "quebras de linha" pretendidas na versão 50.0.2661.94 do Chrome (64 bits). &#10;está funcionando bem nas versões atuais do chrome, firefox e opera (todas para Ubuntu de 64 bits) e no internet explorer versão 11.0 e algumas alterações no windows.
Tass
Isso é particularmente útil para mim, porque eu estava tentando fazer isso no editor de posts do Wordpress.
Ed1nh0 5/05
13
& # 10; funciona lindamente no IE, Firefox e Chrome. Obrigado!
Daniel
Para chrome & # 013; ....... Exemplo: title = "title1 & # 13; title2 & # 13; title3"
Malik Zahid
75

Tente o personagem 10. Porém, ele não funcionará no Firefox. :(

O texto é exibido (se houver) de maneira dependente do navegador. Pequenas dicas de ferramentas funcionam na maioria dos navegadores. Dicas longas e quebra de linha funcionam no IE e no Safari (use &#10;ou &#13;para uma nova linha). Firefox e Opera não suportam novas linhas. O Firefox não suporta dicas de ferramentas longas.

http://modp.com/wiki/htmltitletooltips

Atualizar:

Desde janeiro de 2015, o Firefox suporta o uso &#13;para inserir uma quebra de linha em um titleatributo HTML . Veja o exemplo de trecho abaixo.

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

Stefan Mai
fonte
2
+1. Se você decidir usar um plug-in jQuery, para obter uma acessibilidade ideal, ele deve ler seu conteúdo no atributo title e substituir algum caractere invisível arbitrário por uma quebra de linha em tempo de execução.
Kent Fredric
+1. Coisas interessantes. Ainda há a questão de alguns UAs apararem o título quando ele aparece - FF2, pelo que me lembro, mas isso é menos um problema nos dias de hoje.
22468 roborourke
3
Desde janeiro de 2015, o Firefox suporta o uso &#13;de um titleatributo para inserir uma quebra de linha.
pseudosavant
Não foi possível obter quebras de linha para trabalhar no IE11 em um elemento SVG <title>. Alguém teve mais sucesso com isso? Tentei o acima / abaixo mencionar códigos char, nenhum parece funcionar.
Lembre-se de
64

Testou isso no IE, Chrome, Safari, Firefox (versões mais recentes 2012-11-27):
&#13;

Funciona em todos eles ...

Morten Repsdorph Husfeldt
fonte
O primeiro método (quebra de linhas no código) parece mais simples, mas não se aplica aos programas js-code dos auto-formatadores.
horiatu 24/07/2015
@Camilo Martin, newline e linefeed são os mesmos nas plataformas. &#10;é o avanço de linha unix, assim como o avanço de linha do Windows. Da mesma forma, &#13;é a nova linha para ambas as plataformas. A especificação especifica o caractere de avanço de linha (LF), que é claro &#10;nas duas plataformas (todas?).
matty
2
@matty Não tenho certeza se eu entendo você - a coisa correta a usar parece o unix LF(que é meio feed de linha padrão em protocolos e ferramentas), CRsó foi usado por Macs antigos (e outras plataformas obscuras) e parece fora de lugar.
Camilo Martin
Peço desculpas pela minha escolha confusa de palavras. O que chamei de avanço de linha (# 10) é realmente uma nova linha, embora muitas vezes chamada de LF. O que chamei de nova linha (nº 13) é realmente um retorno de carro. De qualquer forma, o que quero dizer é que esses valores são os mesmos em todas as plataformas. O fato de que janelas (usando esses dois caracteres para finalizar uma linha) e mac (usando o caractere "errado" para finalizar uma linha) devem ser irrelevantes em relação a qual entidade HTML deve ser usada em um atributo de título. A especificação diz que &#10;, embora aparentemente &#13;funcione em muitas circunstâncias também.
matty
2
planície & # 13; não funciona para o chrome no Linux. A sequência & # 13; & # 10; faz, no entanto.
Sam Watkins
51

Também vale mencionar, se você estiver definindo o atributo title com Javascript como este:

divElement.setAttribute("title", "Line one&#10;Line two");

Isso não vai funcionar. Você deve substituir esse decimal ASCII 10 por um ASCII hexadecimal A da maneira que ele é escapado com Javascript. Como isso:

divElement.setAttribute("title", "Line one\x0ALine two");

cprcrack
fonte
@MaxNanasy Aprovada, e eles equivalentes ( \nmeios de código de char 10 de qualquer maneira)
rvighne
29

No Firefox 12, agora eles oferecem suporte a quebras de linha usando a entidade HTML do feed de linha: &#10;

<span title="First line&#10;Second line">Test</span>

Isso funciona no IE e é o correto de acordo com a especificação HTML5 para o atributo title .

amurra
fonte
16

Se você estiver usando jQuery:

$(td).attr("title", "One \n Two \n Three");

vai funcionar.

testado no IE-9: funcionando.

Anil Bharadia
fonte
Trabalhou no MVC 3 Exemplo: @ Html.DropDownList ("RegId", null, "Selecionar região", novo {title = "Selecione uma região no menu suspenso, \ nque é necessário para obter uma lista de nomes de contratos válidos" , @class = "controle de formulário", onchange = "getContractNames (this)", style = "width: 200px;"})
Warren LaFrance 4/15
15

Como contribuição para a &#013;solução, também podemos usar &#009guias, se você precisar fazer algo assim.

<button title="My to-do list:&#013;&#009;-Item 2&#013;&#009;-Item 3&#013;&#009;-Item 4&#013;&#009;&#009;-Subitem 1">TEST</button>

Demo

insira a descrição da imagem aqui

Juan Cortés
fonte
8

&#13; funcionará em todos os principais navegadores (IE incluído)

Greg Dean
fonte
13
Esta resposta está desatualizada; & # 13; também funciona no Chrome e em outros navegadores.
SaeX
7

Eu sei que estou atrasado para a festa, mas para aqueles que só querem ver isso funcionando, aqui está uma demonstração: http://jsfiddle.net/rzea/vsp6840b/3/

HTML usado:

<a href="#" title="First Line&#013;Second Line">Multiline Tooltip</a>
<br>
<br>
<a href="#" title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Unordered list tooltip</a>
Ricardo Zea
fonte
2
A resposta mais atualizada e funciona muito bem no Firefox. Obrigado.
Marwan مروان
6

Eu não acredito que seja. O Firefox 2 apara títulos de links longos de qualquer maneira e eles realmente devem ser usados ​​apenas para transmitir uma pequena quantidade de texto de ajuda. Se você precisar de mais texto explicativo, sugiro que ele pertença a um parágrafo associado ao link. Você pode adicionar o código javascript da dica de ferramenta para ocultar esses parágrafos e mostrá-los como dicas de ferramenta ao passar o mouse. Essa é sua melhor aposta para fazê-lo funcionar na IMO em vários navegadores.

roborourke
fonte
6

&#xD; <----- Este é o texto necessário para inserir Retorno de transporte.

Juan
fonte
1
Funciona em todos os navegadores :)
MonoThreaded:
6

No Chrome 16, e possivelmente nas versões anteriores, você pode usar "\ n". Como nota de rodapé, "\ t" também funciona

Rehan Khwaja
fonte
6

Tínhamos um requisito em que precisávamos testar tudo isso, eis o que desejo compartilhar

document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")
<p title='Tool
Tip
On
New
Line'>Tooltip with <pre>
  new 
  line</pre> Works in all browsers</p>
<hr/>

<p title="Tool&#13;Tip&#13;On&#13;New&#13;Line">Tooltip with <code>&amp;#13;</code> Not works Firefox browsers</p>
<hr/>

<p title='Tool&#10;Tip&#10;On&#10;New&#10;Line'>Tooltip with <code>&amp;#10;</code> Works in some browsers</p>
<hr/>

<p title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>Tooltip with <code>&amp;#xD;</code> May work in some browsers</p>
<hr/>

<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>
<hr/>


<p title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Tooltip with <code></code>Unordered list tooltip</p>
<hr/>


<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>
<hr/>

<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>
<hr/>

<p title='Tool&#013;Tip&#013;On&#013;New&#013;Line'>Tooltip with <code>&amp;#013;</code> Works in most browsers</p>
<hr/>

Violino

Mohammed Zameer
fonte
6

No Chrome 79, &#13;não funciona mais.

Tive sucesso com:

&#13;&#10;

Isso funciona em todos os principais navegadores.

David Vielhuber
fonte
5

Quanto a quem &#10;não funcionou, é necessário estilizar o elemento no qual as linhas são visíveis como:white-space: pre-line;

Referenciado a partir desta resposta: https://stackoverflow.com/a/17172412/1460591

Youans
fonte
1
Esse estilo precisa ser aplicado a quê? O título? gosta a[title]?
Mohammed Zameer
4

Apenas use isto:

<a title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>link with tip</a>

Você pode adicionar uma nova linha no título usando isso &#x0a.


fonte
4

Basta usar o JavaScript. Compatível com a maioria dos navegadores mais antigos. Use a sequência de escape \ n para nova linha.

   document.getElementById("ElementID").title = 'First Line text \n Second line text'
Welshboy
fonte
Qual versão do Chrome? Funciona para mim e estou usando o Chrome.
Welshboy
Na verdade, estou usando a versão mais recente do Chrome, no entanto, como eu estava trabalhando no SVG Elements, ele não funcionou, não está bom.
NewPHPer
4

Isso &#013;deve funcionar se você apenas usar um atributo de título simples.

nos popovers de inicialização, basta usar data-html="true" e usar html no data-contentatributo

<div title="Hello &#013;World">hover here</div>

csandreas1
fonte
3

A partir das informações disponíveis sobre acessibilidade e do uso de dicas de ferramentas que as tornam maiores com o uso de CR ou quebra de linha, é apreciado o fato de que os vários navegadores não podem / não concordam com o básico, mostra que eles não se importam muito com a acessibilidade.

Dave
fonte
2
Para uma solução muito fácil de navegador personalizado dicas de ferramentas cruzadas ver kollermedia.at/archive/2008/03/24/easy-css-tooltip/...
Dave
@DaveThis é um link bom, no entanto, a quebra de linha na demonstração acontece por causa do atributo de largura
Melsi
3

De acordo com este artigo no site da w3c :

CDATA é uma sequência de caracteres do conjunto de caracteres do documento e pode incluir entidades de caracteres. Os agentes do usuário devem interpretar os valores dos atributos da seguinte maneira:

  • Substitua entidades de caracteres por caracteres,
  • Ignorar feeds de linha,
  • Substitua cada retorno ou guia de carro por um único espaço.

Isso significa que (pelo menos) CR e LF não funcionarão dentro do atributo title. Sugiro que você use um plug-in de dica de ferramenta. A maioria desses plugins permite que HTML arbitrário seja exibido como uma dica de ferramenta do elemento.

Salman A
fonte
1
Sim, eu sei que não é oficial. Você está errado, no entanto. Isso não significa que eles não serão exibidos. Isso significa que a especificação do W3C não indica como elas devem ser exibidas .... O objetivo do post não era sugerir que eles poderiam ser usados ​​para substituir plugins mais funcionais ... era mais um caso de durante a degradação que qualquer outro item poderia ser usado.
penderi 12/09/11
@ip: Eu estou errado em que as recomendações atualizadas do w3c sugerem que os navegadores dividam o conteúdo em torno do caractere LF. No entanto, os navegadores implementarão esse comportamento eventualmente.
Salman A
2

Dicas de ferramentas muito mais agradáveis ​​podem ser criadas manualmente e podem incluir formatação HTML.

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more&#13;&#10;and then some">over</a> the text below:</p>

<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>

<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>

</body>
</html>

Isso foi retirado da postagem do w3schools sobre isso. Experimente o código acima aqui .

Chris
fonte
1

Sintaxe do Razor

No caso do ASP.NET MVC, você pode simplesmente armazenar o título como uma variável conforme o uso \r\ne ele funcionará.

@{ 
    var logTooltip = "Sunday\r\nMonday\r\netc.";
}

<h3 title="@logTooltip">Logs</h3>
Shelby115
fonte
0

hackear mas funciona - (testado no Chrome e no celular)

basta adicionar nenhum espaço de interrupção até que ele se rompa - talvez seja necessário limitar o tamanho da dica de ferramenta, dependendo da quantidade de conteúdo, mas para pequenas mensagens de texto isso funciona:

&nbsp;&nbsp; etc

Tentei de tudo acima e esta é a única coisa que funcionou para mim -

Fstarocka Burns
fonte
0

Eu tentei com "" exibir o texto do título em uma nova linha e funciona como um encanto

Niket Joshi
fonte
0

Estou no firefox 68.7.0esr e o &#013;não funciona. Quebrar as linhas via <CR>funcionou, então eu vou com isso, pois é simples e avançado. ie

<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk
user3416126
fonte
-1

use data-html="true"e aplique <br>.

Nithin C
fonte
1
Isso não faz parte da especificação. Deve ser algum plug
TJ