web-dev-qa-db-fra.com

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

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

Pour ajouter le conseil, j'utilise l'attribut title. 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; / &#13;
  • \r\n
  • Environment.NewLine (J'utilise C #)

Aucune de ces solutions ne fonctionne. C'est possible?

htmltitletooltip
304
penderi

C’est si simple que vous vous tirez dessus ... appuyez simplement sur Entrée!

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

Firefox n’affiche pas d’infos multi-lignes, mais ne remplacera rien par les nouvelles lignes.

276
Greg

Le dernière spécification autorise les sauts de ligne. Un simple retour à la ligne dans l'attribut ou l'entité &#10; (notez que les caractères # et ; sont obligatoires) est correct. .

284
Kornel

Essayez le personnage 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 &#10; ou &#13; pour une nouvelle ligne). Firefox et Opera ne prennent pas en charge les retours à la ligne. Firefox ne prend pas en charge les info-bulles longues.

http://modp.com/wiki/htmltitletooltips

Mise à jour:

Depuis janvier 2015, Firefox prend en charge l'utilisation de &#13; pour insérer un saut de ligne dans un attribut HTML title. Voir l'exemple d'extrait ci-dessous.

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

Testé cela dans IE, Chrome, Safari, Firefox (dernières versions 2012-11-27):
&#13;

Fonctionne dans chacun d'eux ...

65
Morten Repsdorph Husfeldt

Il convient également de mentionner si vous définissez l'attribut title avec Javascript, comme ceci:

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

Ça ne marchera pas. Vous devez remplacer ce ASCII _ décimal 10 par un ASCII hexadécimal A de la façon dont il a été échappé avec Javascript. Comme ça:

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

49
cprcrack

Depuis Firefox 12, ils prennent désormais en charge les sauts de ligne en utilisant l'entité HTML de saut de ligne: &#10;

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

Cela fonctionne dans IE et correspond aux spécifications HTML5 pour attribut title .

25
amurra

Si vous utilisez jQuery:

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

marchera.

testé dans IE-9: travail.

15
Anil Bharadia

Pour contribuer à la solution &#013;, nous pouvons également utiliser &#009 pour les onglets si vous avez besoin de faire quelque chose comme cela.

<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

enter image description here

15
Juan Cortés

Je sais que je suis en retard à la fête, mais pour ceux qui veulent seulement que cela fonctionne, 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>
7
Ricardo Zea

&#13; fonctionnera sur tous les principaux navigateurs (IE inclus)

7
Greg Dean

Nous avions besoin de 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

6
student

Pour qui &#10; n'a pas fonctionné, vous devez styler l'élément sur lequel les lignes sont visibles sous la forme: white-space: pre-line;

À partir de cette réponse: https://stackoverflow.com/a/17172412/1460591

5
Youans

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

5
Rehan Khwaja

Je ne le crois pas. De toute façon, Firefox 2 coupe 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érerais qu'il fasse partie d'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 à travers l’OMI multi-navigateurs.

5
roborourke

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

5
Juan

Il suffit d'utiliser JavaScript. Alors compatible avec la plupart des navigateurs et les plus anciens. Utilisez la séquence d'échappement\n pour la nouvelle ligne.

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

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.

4
user3087089

Selon ce 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 d'utilisateur doivent interpréter les valeurs d'attribut comme suit:

  • Remplacer les entités de caractères par des caractères,
  • Ignorer les sauts de ligne,
  • Remplacez chaque retour ou chaque 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 d'aide sur les infobulles. La plupart de ces plugins permettent d'afficher du HTML arbitraire sous forme d'infobulle d'un élément.

3
Salman A

Les informations disponibles sur l’accessibilité et l’utilisation des info-bulles les agrandissant avec l’utilisation de CR ou de sauts de ligne sont appréciées, le fait que les différents navigateurs ne puissent pas/ne seront pas d’accord sur les éléments de base montre qu’ils ne se soucient guère de l’accessibilité.

3
Dave

Ce &#013; devrait fonctionner si vous utilisez simplement un attribut title.

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

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

Des info-bulles plus esthétiques peuvent être créées manuellement et 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 de le post de w3schools à ce sujet. Expérimentez avec le code ci-dessus .

2
Chris

syntaxe de rasoir

Dans le cas d'ASP.NET MVC, vous pouvez simplement stocker le titre sous forme de variable. Utilisez \r\n et tout fonctionnera.

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

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

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

n'ajoutez pas d'espaces de pause jusqu'à la rupture - vous devrez peut-être limiter la taille de l'info-bulle en fonction de la quantité de contenu, mais cela fonctionne pour les petits messages texte:

&nbsp;&nbsp; etc

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

0
Fstarocka Burns