Comment puis-je utiliser un retour chariot dans une infobulle HTML?
https://stackoverflow.com/questions/358874
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je suis actuellement des infobulles verbeux sur notre site, et je voudrais (sans avoir recours à un plugin jQuery whiz-bang, je sais qu'il ya beaucoup!) À utiliser le transport revient à formater l'info-bulle.
Pour ajouter le conseil que je suis en utilisant l'attribut title. Je l'ai regardé autour des sites habituels et en utilisant le modèle de base de:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
J'ai essayé de remplacer le avec ?:
-
<br /> -
&013; / -
\r\n -
Environment.NewLine(J'utilise C #)
Aucun des travaux ci-dessus. Est-il possible?
La solution
Il est si simple que vous vous lancer ... presser la touche Entrée
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Firefox ne sera pas afficher plusieurs lignes infobulles du tout bien -. Il remplacera les nouvelles lignes avec rien
Autres conseils
dernière spécification permet le caractère de saut de ligne, donc une simple coupure de ligne dans l'attribut ou entité (notez que les caractères et # sont obligatoires ;) sont OK.
caractère Essayez 10. Il ne fonctionnera pas dans Firefox cependant. : (
Le texte est affiché (le cas échéant) dans un navigateur de manière dépendante. Petit infobulles fonctionnent sur la plupart des navigateurs. Longue infobulles sécable travail dans IE et Safari (utilisation
ou pour un nouveau saut de ligne). Firefox et Opera ne le font pas retour à la ligne de soutien. Firefox ne soutenir infobulles longtemps.
http://modp.com/wiki/ htmltitletooltips
Mise à jour:
En Janvier Firefox ne supporte ici à 2015 à l'aide d'insérer une title saut de ligne dans un HTML attribut <=>. Voir l'exemple ci-dessous l'extrait.
<a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a>
testé ce dans IE, Chrome, Safari, Firefox (dernières versions 2012-11-27):
Fonctionne dans tous les ...
Il faut aussi mentionner, si vous définissez l'attribut title avec JavaScript comme ceci:
divElement.setAttribute("title", "Line one Line two");
Il ne fonctionnera pas. Vous devez remplacer cette décimal ASCII 10 à un hexadécimal ASCII A la façon dont il est échappé avec Javascript. Comme ceci:
divElement.setAttribute("title", "Line one\x0ALine two");
de Firefox 12, ils prennent désormais en charge les sauts de ligne à l'aide de l'alimentation en ligne entité HTML:
<span title="First line Second line">Test</span>
Cela fonctionne dans IE et est correcte en fonction de la spécification HTML5 pour le attribut title .
Si vous utilisez jQuery:
$(td).attr("title", "One \n Two \n Three");
fonctionne.
testé dans IE-9:. Travail
En tant que contribution à la solution 
, nous pouvons également utiliser pour les onglets si 	 vous avez besoin de faire quelque chose comme ça.
<button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-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émonstration: http://jsfiddle.net/rzea/vsp6840b/3/
HTML utilisé:
<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>
fonctionne sur tous les navigateurs IE majeurs (inclus)
Nous avions une exigence où nous avions besoin de tester tout cela, voici ce que je veux 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 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/>
Je ne crois pas que ce soit. Firefox 2 versions titres de lien longs de toute façon et ils devraient vraiment être utilisées que pour transmettre une petite quantité de texte d'aide. Si vous avez besoin de plus d'explication du texte, je dirais qu'il appartient dans un paragraphe associé au lien. Vous pouvez ensuite ajouter l'info-bulle code javascript pour cacher ces paragraphes et leur montrer que les infobulles sur vol stationnaire. C'est votre meilleur pari pour le faire fonctionner l'OMI cross-browser.

 <----- Ceci est le texte nécessaire pour insérer Carry Retour.
Chrome 16 et versions antérieures éventuellement, vous pouvez utiliser "\ n". En tant que sidenote, "\ t" fonctionne aussi
pour qui ne fonctionne pas vous devez styler l'élément sur lequel les lignes sont visibles sous: white-space: pre-line;
de cette réponse Référencé: https://stackoverflow.com/a/17172412/1460591
Il suffit d'utiliser ceci:
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Vous pouvez ajouter une nouvelle ligne sur le titre en utilisant ce 
.
Il suffit d'utiliser JavaScript. Ensuite, compatible avec la plupart des navigateurs et plus. Utiliser la séquence d'échappement \ n de saut de ligne.
document.getElementById("ElementID").title = 'First Line text \n Second line text'
D'après les informations disponibles sur l'accessibilité et l'utilisation des infobulles qui les rend plus à l'utilisation de CR ou saut de ligne 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 sur accessibilité.
Selon cette :
CDATA est une séquence de caractères du caractères du document et peuvent inclure des entités de caractère. Les agents utilisateurs devraient interpréter l'attribut Les valeurs de la manière suivante:
- Remplacer les entités de caractères avec des caractères,
- Flux ligne Ignorer,
- Remplacer chaque retour chariot ou 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 un plugin infobulle. La plupart de ces plugins permettent HTML arbitraire à afficher comme info-bulle d'un élément.
Ce devrait fonctionner si 
 vous utilisez simplement d'un simple attribut title.
sur popovers bootstrap, il suffit d'utiliser et utiliser html data-html="true" dans l'attribut data-content.
<div title="Hello 
World">hover here</div>
Beaucoup plus agréable infobulles à la recherche peuvent être créés manuellement, et peuvent 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 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 de les W3Schools affichent sur ce point. noreferrer"> Expérience .
Syntaxe Razor
Dans le cas d'ASP.NET MVC, vous pouvez simplement enregistrer le titre comme une variable que l'utilisation et il va \r\n travailler.
@{
var logTooltip = "Sunday\r\nMonday\r\netc.";
}
<h3 title="@logTooltip">Logs</h3>
pirater mais fonctionne - (testé sur chrome et mobile)
il suffit d'ajouter aucun espace de pause jusqu'à ce qu'il casse - vous pourriez avoir à limiter la taille de l'info-bulle 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 -
et appliquer l'utilisation data-html="true" <br>.
