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

J'ajoute actuellement des info-bulles détaillées à notre site, et j'aimerais (sans avoir à recourir à un plugin jQuery whiz-bang, je sais qu'il y en a beaucoup!) Utiliser des retours chariot pour formater l'info-bulle.

Pour ajouter le conseil, j'utilise l' titleattribut. J'ai parcouru les sites habituels et utilisé le modèle de base de:

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

J'ai essayé de remplacer le ?par:

• <br />
• &013; / 

• \r\n
• Environment.NewLine (J'utilise C #)

Aucun des travaux ci-dessus. C'est possible?

C'est tellement simple que vous vous donnerez un coup de pied ... appuyez simplement sur Entrée!

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

Firefox n'affichera pas du tout les info-bulles sur plusieurs lignes - il remplacera les nouvelles lignes par rien.

La dernière spécification autorise le caractère de saut de ligne, donc un simple saut de ligne à l'intérieur de l'attribut ou de l'entité 
(notez que les caractères #et ;sont obligatoires) sont OK.

Essayez le caractère 10. Cela ne fonctionnera pas dans Firefox cependant. :(

Le texte est affiché (le cas échéant) en fonction du navigateur. Les petites info-bulles fonctionnent sur la plupart des navigateurs. Les longues info-bulles et les sauts de ligne fonctionnent dans IE et Safari (utilisez 
ou 
pour une nouvelle ligne). Firefox et Opera ne prennent pas en charge les nouvelles lignes. Firefox ne prend pas en charge les longues infobulles.

http://modp.com/wiki/htmltitletooltips

Mettre à jour:

Depuis janvier 2015, Firefox prend en charge l'utilisation 
de l'insertion d'un saut de ligne dans un titleattribut HTML . Voir l'exemple d'extrait ci-dessous.

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

Testé dans IE, Chrome, Safari, Firefox (dernières versions 2012-11-27):



Fonctionne dans chacun d'eux ...

A noter également, 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 ce décimal ASCII 10 par un A ASCII hexadécimal de la manière dont il est échappé avec Javascript. Comme ça:

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

Depuis Firefox 12, ils prennent désormais en charge les sauts de ligne à l'aide de l'entité HTML de saut de ligne: 


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

Cela fonctionne dans IE et est correct selon la spécification HTML5 pour l' attribut title .

Si vous utilisez jQuery:

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

marchera.

testé dans IE-9: fonctionne.

En tant que contribution à la 
solution, nous pouvons également utiliser &#009des onglets si vous avez besoin de faire quelque chose comme ça.

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

Démo


 fonctionnera sur tous les navigateurs majeurs (IE inclus)

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

HTML utilisé:

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

Je ne le crois pas. Firefox 2 coupe de toute façon les titres de liens longs et ils ne devraient vraiment être utilisés que pour transmettre une petite quantité de texte d'aide. Si vous avez besoin de plus de texte d'explication, je suggère qu'il appartient à un paragraphe associé au lien. Vous pouvez ensuite ajouter le code javascript des info-bulles pour masquer ces paragraphes et les afficher sous forme d'infobulles en survol. C'est votre meilleur pari pour le faire fonctionner IMO multi-navigateur.


 <----- Ceci est le texte nécessaire pour insérer le retour de port.

Sur Chrome 16, et éventuellement sur des versions antérieures, vous pouvez utiliser "\ n". En tant que sidenote, "\ t" fonctionne également

Nous avions une exigence où nous devions tester tout cela, voici ce que je souhaite partager

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

Violon

Sur Chrome 79, 
ne fonctionne plus.

J'ai réussi avec:




Cela fonctionne dans tous les principaux navigateurs.

Quant à qui 
n'a pas fonctionné, vous devez styliser l'élément sur lequel les lignes sont visibles en:white-space: pre-line;

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

Utilisez simplement ceci:

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

Vous pouvez ajouter une nouvelle ligne sur le titre en utilisant ceci &#x0a.

Utilisez simplement JavaScript. Puis compatible avec la plupart des navigateurs et anciens. Utilisez la séquence d'échappement \ n pour la nouvelle ligne.

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

Cela 
devrait fonctionner si vous utilisez simplement un attribut de titre simple.

sur les popovers bootstrap, il suffit d'utiliser data-html="true" et d'utiliser html dans l' data-contentattribut.

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

D'après les informations disponibles sur l'accessibilité et l'utilisation d'infobulles pour les agrandir avec l'utilisation de CR ou de saut de ligne, le fait que les différents navigateurs ne puissent pas / ne soient pas d'accord sur les bases montre qu'ils ne se soucient pas beaucoup de l'accessibilité.

Selon cet article sur le site Internet du w3c :

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

• Remplacez les entités de caractère par des caractères,
• Ignorer les sauts de ligne,
• Remplacez chaque retour chariot ou onglet par un seul espace.

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

Des info-bulles beaucoup plus belles peuvent être créées manuellement et peuvent inclure un formatage 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 tiré du post w3schools à ce sujet. Essayez le code ci-dessus ici .

Syntaxe de rasoir

Dans le cas d'ASP.NET MVC, vous pouvez simplement stocker le titre en tant que variable à l'utilisation \r\net cela fonctionnera.

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

<h3 title="@logTooltip">Logs</h3>

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

ajoutez simplement aucun espace de pause jusqu'à ce qu'il se casse - vous devrez peut-être limiter la taille de l'infobulle en fonction de la quantité de contenu, mais pour les petits messages texte, cela fonctionne:

   etc

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

J'ai essayé avec "" d'afficher le texte du titre sur une nouvelle ligne et cela fonctionne comme un charme

Je suis sur Firefox 68.7.0esr et 
cela ne fonctionne pas. Briser les lignes via <CR>a fonctionné, donc je vais avec ça car c'est simple et en avant. c'est à dire

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

utiliser data-html="true"et appliquer <br>.