Como posso usar um retorno de carro numa dica HTML?
https://stackoverflow.com/questions/358874
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Atualmente estou adicionando detalhado dicas de ferramentas ao nosso site, e eu gostaria (sem ter que recorrer a um plugin whiz-bang jQuery, eu sei que há muitos!) Para usar retornos de carro para formatar a dica.
Para adicionar a ponta Eu estou usando o atributo title. Eu olhei em torno dos locais habituais e usando o modelo básico de:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
Eu tentei substituir o ? com:
-
<br /> -
&013; / -
\r\n -
Environment.NewLine(estou usando C #)
Nenhuma das obras acima. É possível?
Solução
É tão simples que você vai chutar a si mesmo ... apenas pressione enter!
<a title='Tool
Tip
On
New
Line'>link with tip</a>
O Firefox não vai exibir dicas de ferramentas multi-linha em tudo embora -. Ele irá substituir as novas linhas com nada
Outras dicas
O 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 personagens # e ; são obrigatórios) estão OK.
caráter Try 10. Não vai funcionar no Firefox embora. : (
O texto é exibido (se em tudo) em um forma dependente browser. Pequeno tooltips trabalho na maioria dos navegadores. Longo dicas e linha quebrando trabalho no IE e Safari (
uso ou para um nova nova linha). Firefox e Opera não novas linhas de apoio. Firefox não faz apoiar as dicas longos.
http://modp.com/wiki/ htmltitletooltips
Update:
A partir de janeiro 2015 Firefox suporta usando para inserir uma quebra de linha em um atributo title HTML. Veja o exemplo de trecho abaixo.
<a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a>
Testado isso no IE, Chrome, Safari, Firefox (versões mais recentes 2012/11/27):
Obras em todos eles ...
Também vale a pena mencionar, se você estiver configurando o atributo title com JavaScript como este:
divElement.setAttribute("title", "Line one Line two");
Não vai funcionar. Você tem que substituir essa decimal ASCII 10 a um ASCII hexadecimal A na forma como ele escapou com Javascript. Como esta:
divElement.setAttribute("title", "Line one\x0ALine two");
A partir do Firefox 12 que agora quebras de linha de apoio usando a linha de entidade de alimentação HTML:
<span title="First line Second line">Test</span>
Isso funciona no IE e é o acordo correto para 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:. Trabalhando
Como contribuição para a solução 
, também podemos usar 	 para guias, se você precisar de fazer algo assim.
<button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-Subitem 1">TEST</button>
Demonstração
Eu sei que estou atrasado para a festa, mas para aqueles que querem apenas para ver este trabalho, aqui está uma demonstração: http://jsfiddle.net/rzea/vsp6840b/3/
HTML usado:
<a href="#" title="First Line
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>
irá funcionar em todos os maiores navegadores (IE incluído)
Nós tivemos um requisito onde precisávamos testar tudo isso, aqui está o que eu gostaria de 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 Tip On New Line">Tooltip with <code>&#13;</code> Not works Firefox browsers</p>
<hr/>
<p title='Tool Tip On New Line'>Tooltip with <code>&#10;</code> Works in some browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#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
Tip
On
New
Line'>Tooltip with <code>&#013;</code> Works in most browsers</p>
<hr/>
Eu não acredito que seja. Firefox 2 guarnições títulos longos link de qualquer maneira e eles realmente deve ser usado apenas para transmitir uma pequena quantidade de texto de ajuda. Se você precisar de mais texto explicação que eu sugeriria que ele pertence a um parágrafo associado com o link. Você pode então adicionar o código dica javascript para esconder nesses números e mostrar-lhes como dicas sobre hover. Essa é a sua melhor aposta para fazê-la funcionar cross-browser IMO.

 <----- Este é o texto necessário para inserir Carry Return.
No Chrome 16, e possivelmente versões anteriores, você pode usar "\ n". Como nota, "\ t" também funciona
Como para quem não funcionar, você tem que estilo o elemento sobre o qual linhas são visíveis na como: white-space: pre-line;
referenciada a partir desta Resposta: https://stackoverflow.com/a/17172412/1460591
Apenas use este:
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Você pode adicionar nova linha em título usando este 
.
Basta usar JavaScript. Em seguida, compatível com a maioria e mais velhos navegadores. Use a seqüência de escape \ n para nova linha.
document.getElementById("ElementID").title = 'First Line text \n Second line text'
A partir das informações disponíveis sobre a acessibilidade eo uso de dicas de ferramentas tornando-maior com o uso de CR ou quebra de linha é apreciado, o fato de que os vários navegadores não pode / não vai concordar com noções básicas mostra que eles não se importam muito sobre acessibilidade.
De acordo com esta artigo no site da W3C :
CDATA é uma sequência de caracteres do conjunto de caracteres do documento e podem incluir entidades de caracteres. Os agentes deveriam interpretar atributo Os valores da seguinte forma:
- Substituir entidades de caracteres com caracteres,
- Ignorar avanços de linha,
- Substituir cada retorno de carro ou guia com um único espaço.
Isto significa que (pelo menos) CR e LF não funcionará atributo título dentro. Eu sugiro que você use um plugin dica. A maioria desses plugins permitem arbitrário HTML para ser exibida como dica de um elemento.
Esta 
 deve funcionar se você usar apenas um atributo simples título.
em popovers de bootstrap, apenas data-html="true" uso e utilização html no atributo data-content.
<div title="Hello 
World">hover here</div>
Muito melhor olhando as dicas podem ser criados 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 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>
Esta é retirada do os w3schools postar sobre este assunto. com o código acima aqui .
Navalha Sintaxe
No caso da ASP.NET MVC você pode apenas armazenar o título como uma variável como o uso \r\n e ele vai trabalhar.
@{
var logTooltip = "Sunday\r\nMonday\r\netc.";
}
<h3 title="@logTooltip">Logs</h3>
cortar, mas obras - (testado em cromo e móvel)
basta adicionar sem espaços de quebra até quebrar - você pode ter que limitar o tamanho dica dependendo da quantidade de conteúdo, mas para pequenas mensagens de texto isso funciona:
etc
tudo Tentei acima e esta é a única coisa que funcionou para mim -
uso data-html="true" e aplicar <br>.
