Comment utiliser un retour chariot dans une infobulle HTML ?

Question

Je suis en train d'ajouter des infobulles verbeuses à notre site et j'aimerais (sans avoir à recourir à un plugin jQuery de pointe, je sais qu'il y en a beaucoup !) utiliser les retours chariot pour formater l'infobulle.

Pour ajouter l'astuce, j'utilise le title attribut. J'ai fait le tour des sites habituels et j'ai utilisé 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 éléments ci-dessus ne fonctionne. Est-ce possible ?

Answer 1

El dernière spécification autorise le caractère de saut 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 # y ; sont nécessaires) sont OK.

Answer 2

C'est tellement simple que vous allez vous en vouloir : il suffit d'appuyer sur Enter !

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

Answer 3

Essayez le caractère 10. Mais cela ne fonctionnera pas dans Firefox :(

Le texte est affiché (si tant est qu'il le soit) dans un format dépend du navigateur. Les petites fonctionnent sur la plupart des navigateurs. Les longues et le retour à la ligne fonctionnent dans IE et Safari (utilisez 
 o 
 pour un nouvelle ligne). Firefox et Opera ne supportent pas les nouvelles lignes. Firefox ne prend pas en charge prend pas en charge les longues infobulles.

http://modp.com/wiki/htmltitletooltips

Mise à jour :

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

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

Answer 4

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



Ça marche dans tous les cas...

Answer 5

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

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

Il ne fonctionne pas. Vous devez remplacer ce 10 décimal ASCII par un A hexadécimal ASCII de la manière dont il est échappé avec Javascript. Comme ceci :

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