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

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; / 

• \r\n
• Environment.NewLine (Eu estou usando c #)

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

É 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.

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

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 
ou 
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 
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>

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



Funciona em todos eles ...

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

divElement.setAttribute("title", "Line one
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");

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


<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 .

Se você estiver usando jQuery:

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

vai funcionar.

testado no IE-9: funcionando.

Como contribuição para a 
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


 funcionará em todos os principais navegadores (IE incluído)

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>

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.


 <----- Este é o texto necessário para inserir Retorno de transporte.

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

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

No Chrome 79, 
não funciona mais.

Tive sucesso com:




Isso funciona em todos os principais navegadores.

Quanto a quem 
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

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.

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'

Isso 
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>

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.

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.

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 .

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>

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:

   etc

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

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

Estou no firefox 68.7.0esr e o 
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

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