Comment puis-je utiliser un retour de chariot dans un HTML info-bulle?

C'est tellement simple que vous allez vous lancer... appuyez simplement sur entrée!

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

Firefox n'affiche pas les multi-ligne info-bulles à tous bien qu'il va remplacer les retours à la ligne avec rien.

Essayer de caractère 10. Il ne fonctionne pas dans Firefox si. 🙁

Le texte est affiché (si) dans un
navigateur de manière dépendante. Petit
les info-bulles de travail sur la plupart des navigateurs. Long
les info-bulles et de coupure de ligne de travail dans IE
et Safari (utiliser 
 ou 
 pour un
nouveau saut de ligne). Firefox et Opera ne pas
le soutien des retours à la ligne. Firefox ne le fait pas
appui long des info-bulles.

http://modp.com/wiki/htmltitletooltips

Mise à jour:

À compter de janvier 2015 Firefox prend en charge l'aide 
 pour insérer un saut de ligne en HTML title attribut. Voir l'extrait de l'exemple ci-dessous.

HTML:

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

Également la peine de mentionner, si vous définissez l'attribut title avec Javascript comme ceci:

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

Ça ne marchera pas. Vous devez remplacer cette ASCII décimal de 10 à un ASCII hexadécimal Une dans la façon dont il s'est échappé avec Javascript. Comme ceci:

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

Si vous utilisez jQuery :

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

fonctionne.

testé dans IE-9 : travail.

Je sais je suis en retard à la fête, mais pour ceux qui veulent juste voir ce travail, voici une démo: http://jsfiddle.net/rzea/vsp6840b/3/

HTML:

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

Nous avons eu lorsque nous avons eu besoin de tester tous les de ces, ici que je souhaite partager

JS:

document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")

HTML:

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

Violon


 <----- C'est le texte nécessaires à l'insertion d'Effectuer de Retour.

Comme pour qui 
 ne fonctionne pas, vous avez le style de l'élément sur lequel les lignes sont visibles en tant que : white-space: pre-line;

Référencés à partir de cette Réponse : https://stackoverflow.com/a/17172412/1460591

Suffit d'utiliser JavaScript. Alors compatible avec la plupart des et des anciens navigateurs.
Utiliser la séquence d'échappement \n pour un retour à la ligne.

   document.getElementById("ElementID").title = 'First Line text \n Second line text'

Selon cette l'article sur le site web du w3c:

CDATA est une séquence de caractères du jeu de caractères de document et
peut inclure des entités de caractères. Les agents utilisateurs devraient interpréter attribut
les valeurs comme suit:

• Remplacer les entités de caractères avec des caractères,
• Ignorer les retours à la ligne,
• Remplacer chaque retour chariot ou un onglet avec un seul espace.

Cela signifie que (au moins) CR et LF ne fonctionne pas à l'intérieur de l'attribut title. Je vous suggère d'utiliser une info-bulle plugin. La plupart de ces plugins permettent de code HTML arbitraire pour être affiché comme un élément de l'info-bulle.

Beaucoup plus agréable à la recherche des info-bulles peuvent être créés manuellement et peut inclure la mise en forme 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>

Ceci est pris à partir de le w3schools post sur cette. Expérimenter avec le code ci-dessus ici.

hack mais fonctionne - (testé sur chrome et mobile)

juste de ne pas ajouter de pause espaces   jusqu'à ce qu'il casse, vous pourriez avoir à limiter la taille de l'infobulle en fonction de la quantité de contenu, mais pour les petits messages texte cela fonctionne:

   etc

Tout essayé ci-dessus et c'est la seule chose qui a fonctionné pour moi -