Comment puis-je utiliser un retour de carriage dans un tooltip HTML?

la dernière spécification permet le caractère d'avance de ligne, de sorte qu'un simple saut de ligne à l'intérieur de l'attribut ou de l'entité 
 (notez que les caractères # et ; sont requis) sont OK.

cela ne fonctionnera pas dans tous les navigateurs actuels, donc assurez-vous que votre texte a du sens avec les nouvelles lignes enlevées.

Essayer de caractère 10. Mais ça ne marchera pas à Firefox. : (

Le texte est affiché (si) dans un mode dépendant du navigateur. Petit les infobulles fonctionnent sur la plupart des navigateurs. Long les info-bulles et de coupure de ligne de travail dans IE et Safari (utilisez 
 ou 
 pour nouveau saut de ligne). Firefox et Opera ne sont pas le soutien des retours à la ligne. Firefox ne le fait pas soutenez de longues infobulles.

http://modp.com/wiki/htmltitletooltips

mise à jour:

depuis janvier 2015, Firefox supporte l'utilisation de 
 pour insérer une rupture de ligne dans un attribut HTML title . Voir l'extrait de l'exemple 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...

vaut é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 ce ASCII décimal 10 par un ascii hexadécimal a dans la façon dont il s'est échappé avec Javascript. Comme ceci:

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

à partir de Firefox 12 ils prennent maintenant en charge les sauts de ligne en utilisant L'entité HTML d'alimentation de ligne: 


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

cela fonctionne dans IE et est le correct selon la spécification HTML5 pour le attribut de titre .

si vous utilisez jQuery:

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

fonctionnera.

testé dans IE-9: en service.

comme contribution à la solution 
 , nous pouvons également utiliser &#009 pour les 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

je sais que 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 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 crois pas. Firefox 2 garnitures longues lien de titres de toute façon et ils devraient vraiment être utilisés pour transmettre une petite quantité de texte d'aide. Si vous avez besoin de plus de texte d'explication je suggérerais qu'il appartient dans un paragraphe associé au lien. Vous pouvez alors ajouter le code javascript tooltip pour masquer ces paragraphes et les montrer comme des tooltips en stationnaire. C'est votre meilleur pari pour le faire fonctionner cross-browser IMO.


 fonctionnera en i.e. seulement


 <----- C'est le texte nécessaire pour insérer Carry Return.

sur Chrome 16, et peut-être des versions plus anciennes, vous pouvez utiliser"\n". Comme un sidenote, "\t "fonctionne aussi

comme pour qui 
 n'a pas fonctionné vous devez styliser l'élément sur lequel les lignes sont visibles en tant que: white-space: pre-line;

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

nous avions une exigence où nous avions besoin de tester tous ces, 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

il suffit d'utiliser ceci:

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

vous pouvez ajouter une nouvelle ligne sur le titre en utilisant ce &#x0a .

utilisez JavaScript. Puis compatible avec la plupart et les navigateurs plus anciens. Utilisez la séquence d'échappement \n Pour newline.

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

D'après les informations disponibles sur l'accessibilité et l'utilisation de tooltips les rendant plus grands avec L'utilisation de CR ou line break est apprécié, le fait que les différents navigateurs ne peuvent pas/ne seront pas d'accord sur les bases montre qu'ils ne se soucient pas beaucoup de l'accessibilité.

selon cet article sur le site Web 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 l'attribut valeurs comme suit:

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

cela signifie que (au moins) CR et LF ne fonctionneront pas dans l'attribut title. Je suggère que vous utilisiez un plugin tooltip. La plupart de ces plugins permettent au HTML arbitraire d'être affiché en tant que tooltip d'un élément.

ce 
 devrait fonctionner si vous utilisez un attribut de titre simple.

sur les popovers de bootstrap, utilisez simplement data-html="true" et utilisez html dans l'attribut data-content .

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

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

n'ajouter aucun espace de pause jusqu'à ce qu'il se brise - vous pourriez avoir à limiter la taille tooltip en fonction de la quantité de contenu, mais pour les petits messages texte cela fonctionne:

   etc

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

Syntaxe De Razor

dans le cas de ASP.NET MVC vous pouvez simplement stocker le titre comme une variable que l'utilisation \r\n et il fonctionnera.

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

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

beaucoup plus belles perspectives d'outils peuvent être créés manuellement, et peut inclure le 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 pris à partir de la w3schools post sur ce. expérimentez avec le code ci-dessus ici .

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