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

J’ajoute actuellement des info-bulles détaillées à notre site, et je voudrais (sans avoir à recourir à un plugin jQuery, je sais qu’il y en a beaucoup!) Pour utiliser les retours chariot pour formater l’info-bulle.

Pour append le conseil, j’utilise l’atsortingbut title . J’ai parcouru les sites habituels et utilisé le modèle de base de:

 link with tip 

J’ai essayé de remplacer le ? avec:


  • &013; /
  • \r\n
  • Environment.NewLine (J’utilise C #)

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

C’est si simple que vous vous donnerez un coup de pied … appuyez simplement sur Entrée!

 link with tip 

Firefox n’affichera aucune info-bulle multi-ligne – il remplacera les nouvelles lignes sans rien.

La dernière spécification autorise le caractère de saut de ligne, de sorte qu’une simple ligne se brise à l’intérieur de l’atsortingbut ou de l’entité (notez que les caractères # et ; sont obligatoires) sont corrects.

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

Essayez le caractère 10. Cela ne fonctionnera pas dans Firefox si. 🙁

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

http://modp.com/wiki/htmltitletooltips

Mettre à jour:

À partir de janvier 2015, Firefox prend en charge l’utilisation de insérer un saut de ligne dans un atsortingbut de title HTML. Voir l’exemple d’extrait de code ci-dessous.

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

Fonctionne dans tous les …

À noter également, si vous définissez l’atsortingbut title avec Javascript comme ceci:

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

Ça ne marchera pas Vous devez remplacer ce nombre décimal ASCII 10 par un hexadécimal ASCII de la manière dont il a été échappé avec Javascript. Comme ça:

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

À partir de Firefox 12, ils prennent désormais en charge les sauts de ligne en utilisant l’entité HTML de saut de ligne:

 Test 

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

Si vous utilisez jQuery:

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

marchera.

testé dans IE-9: travail.

Comme consortingbution au solution, nous pouvons également utiliser pour les tabs si vous avez besoin de faire quelque chose comme ça.

  

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

 Multiline Tooltip 

Unordered list tooltip

Je ne le crois pas. Firefox 2 compense de toute façon les titres de liens longs et ils ne devraient ê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 appartient à un paragraphe associé au lien. Vous pouvez ensuite append le code JavaScript de l’info-bulle pour masquer ces paragraphes et les afficher comme des info-bulles lors du survol. C’est votre meilleur pari pour le faire fonctionner avec une OMI inter-navigateur.

travaillera dans ie seulement

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

Sur Chrome 16 et éventuellement les versions antérieures, vous pouvez utiliser “\ n”. En tant qu’autre note, “\ t” fonctionne aussi

Pour qui n’a pas fonctionné, vous devez définir l’élément sur lequel les lignes sont visibles comme: white-space: pre-line;

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

Nous avions besoin de tester tous ces éléments, voici ce que je souhaite partager

 document.getElementById("tooltip").setAtsortingbute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine") 
 

Tooltip with

 new line

Works in all browsers


Tooltip with &#13; Not works Firefox browsers


Tooltip with &#10; Works in some browsers


Tooltip with &#xD; May work in some browsers


Tooltip with document.getElementById("tooltip").setAtsortingbute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine") May work in some browsers


Tooltip with Unordered list tooltip


Tooltip with \n May not work in modern browsers


Tooltip with \t May not work in modern browsers


Tooltip with &#013; Works in most browsers


Utilisez simplement ceci:

 link with tip 

Vous pouvez append une nouvelle ligne au titre en utilisant ce .

Utilisez simplement JavaScript. Ensuite, compatible avec la plupart des navigateurs et les anciens. Utilisez la séquence d’échappement \ n pour newline.

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

Les informations disponibles sur l’accessibilité et l’utilisation des infobulles pour les rendre plus volumineuses avec l’utilisation de CR ou de saut de ligne sont appréciées, le fait que les différents navigateurs ne peuvent pas / ne soient pas d’accord sur les principes de base.

Selon cet article sur le site Web de 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’atsortingbut comme suit:

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

Cela signifie que (au moins) CR et LF ne fonctionneront pas dans l’atsortingbut title. Je suggère que vous utilisiez un plug-in d’info-bulle. La plupart de ces plugins permettent d’afficher du code HTML arbitraire comme infobulle d’un élément.

Ceci devrait fonctionner si vous utilisez simplement un atsortingbut de titre simple.

sur les fenêtres de démarrage, utilisez simplement data-html="true" et utilisez html dans l’atsortingbut data-content .

 
hover here

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

il suffit d’append des espaces de pause jusqu’à ce qu’il se casse – vous devrez peut-être limiter la taille de l’info-bulle en fonction de la quantité de contenu, mais pour les petits messages texte, cela fonctionne:

    etc 

J’ai tout essayé et c’est la seule chose qui a fonctionné pour moi –

Syntaxe du razor

Dans le cas d’ASP.NET MVC, vous pouvez simplement stocker le titre en tant que variable en utilisant \r\n et cela fonctionnera.

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

Logs

Des info-bulles plus belles peuvent être créées manuellement et peuvent inclure le formatage HTML.

     

Tooltip

Move the mouse over the text below:

Hover over me Tooltip text some more
and more
Each tooltip is independent Other tooltip text some more
and more

Ceci est tiré du post de w3schools à ce sujet. Expérimentez avec le code ci-dessus ici .