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


330

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

Pour ajouter le conseil, j'utilise l' titleattribut. 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 #)

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


C'est assez délicat, mais il pourrait y avoir une solution de contournement. Transformez tous les espaces de votre titre en espace insécable &nbsp;. Ensuite, placez les espaces où vous voulez que les sauts de ligne. Vous devrez peut-être également ajouter un groupe de &nbsp;caractères avant votre espace (saut de ligne).
jumxozizi

Réponses:


292

C'est tellement simple que vous vous donnerez un coup de pied ... appuyez simplement sur Entrée!

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

Firefox n'affichera pas du tout les info-bulles sur plusieurs lignes - il remplacera les nouvelles lignes par rien.


69
Cette réponse dépassée, Firefox fait des nouvelles lignes d'affichage dans les titres maintenant (j'utilise v25). Cela fonctionne avec \n, \u000Aet \x0A.
Halcyon

1
@Halcyon, juste pour clarifier pour les autres lecteurs, les trois codes ci-dessus ne semblent pas être HTML. Ils ressemblent plus à des séquences d'échappement de chaînes de langage dérivées de C.
Sam

3
@Sam, je ne comprends pas ce que vous entendez par là. \x0A(octet) est le code de caractère qui correspond à une nouvelle ligne. Idem pour \u000A(unicode). \nest aussi une nouvelle ligne.
Halcyon

13
@Halcyon, j'ai essayé d'insérer ces séquences d'échappement dans un titleattribut dans Firefox et Chrome, et elles ont juste été présentées littéralement dans l'info-bulle. Par la suite, j'ai réalisé que vous utilisiez probablement cette syntaxe comme moyen de communiquer les caractères (et non les séquences d'échappement) à utiliser. Mon commentaire est pour faire gagner du temps à d'autres personnes en les avertissant de ne pas essayer de mettre vos séquences d'échappement dans leur HTML afin qu'elles ne perdent pas de temps comme moi.
Sam

4
@Tarquin Ils ne fonctionnent pas en HTML, ils fonctionnent uniquement spécifiquement dans les guillemets doubles de PHP car c'est une caractéristique des guillemets doubles de PHP.
Brilliand

307

La dernière spécification autorise le caractère de saut de ligne, donc un simple saut de ligne à l'intérieur de l'attribut ou de l'entité &#10;(notez que les caractères #et ;sont obligatoires) sont OK.


4
ce n'est pas supporté par Chrome mais pour Firefox bien!
Alaeddine

5
J'ai essayé les deux &#10;et &#13;. &#13;n'honorerait pas les "sauts de ligne" voulus dans la version Chrome 50.0.2661.94 (64 bits). &#10;fonctionne bien dans les versions actuelles de Chrome, Firefox et Opera (tous pour Ubuntu 64 bits) et Internet Explorer version 11.0 et certains changements sur Windows.
Tass

C'est particulièrement utile pour moi car j'essayais de le faire sur Wordpress post editor.
ed1nh0

13
&#dix; fonctionne à merveille dans IE, Firefox et Chrome. Merci!
Daniel

Pour chrome & # 013; ....... Exemple: title = "title1 & # 13; title2 & # 13; title3"
Malik Zahid

75

Essayez le caractère 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 nouvelles lignes. Firefox ne prend pas en charge les longues infobulles.

http://modp.com/wiki/htmltitletooltips

Mettre à jour:

Depuis janvier 2015, Firefox prend en charge l'utilisation &#13;de l'insertion d'un saut de ligne dans un titleattribut HTML . Voir l'exemple d'extrait ci-dessous.

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


2
+1. Si vous décidez d'utiliser un plugin jQuery, pour une accessibilité optimale, il doit lire son contenu à partir de l'attribut title et substituer un caractère arbitraire invisible à un saut de ligne lors de l'exécution.
Kent Fredric

+1. Des trucs intéressants. Il y a toujours le problème de certains UA coupant le titre lorsqu'il apparaît - FF2 si je me souviens bien, mais c'est moins un problème de nos jours.
roborourke

3
Depuis janvier 2015, Firefox prend en charge l'utilisation &#13;d'un titleattribut pour insérer un saut de ligne.
pseudosavant

Je n'ai pas pu faire fonctionner les sauts de ligne dans IE11 dans un élément SVG <title>. Quelqu'un a-t-il eu plus de succès avec ça? J'ai essayé les codes de mention ci-dessus / ci-dessous, aucun ne semble fonctionner.
RemEmber

64

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

Fonctionne dans chacun d'eux ...


La première méthode (rupture des lignes dans le code) semble plus simple, mais ne convient pas aux programmes de formatage automatique de code js.
horiatu

@Camilo Martin, newline et linefeed sont les mêmes sur toutes les plateformes. &#10;est le saut de ligne unix tout comme c'est le saut de ligne Windows. De même, &#13;est la nouvelle ligne pour les deux plates-formes. La spécification spécifie le caractère de saut de ligne (LF) qui est bien sûr &#10;sur les deux (toutes?) Plates-formes.
matty

2
@matty Je ne sais pas si je vous comprends - la bonne chose à utiliser semble être l'Unix LF(qui est un peu un saut de ligne standard entre les protocoles et les outils), CRn'a été utilisé que par les anciens Mac (et autres plates-formes obscures) et semble hors de propos.
Camilo Martin

Je m'excuse pour mon choix de mots déroutant. Ce que j'ai appelé un saut de ligne (# 10) est vraiment une nouvelle ligne, bien que souvent appelée LF. Ce que j'ai appelé une nouvelle ligne (# 13) est vraiment un retour chariot. Dans tous les cas, mon point était que ces valeurs sont les mêmes sur toutes les plateformes. Le fait que windows (en utilisant ces deux caractères pour terminer une ligne) et mac (en utilisant le "mauvais" caractère pour terminer une ligne) ne devrait pas être pertinent en ce qui concerne l'entité HTML à utiliser dans un attribut title. La spécification dit &#10;, bien que cela &#13;fonctionne apparemment également dans de nombreuses circonstances.
matty

2
simple & # 13; ne fonctionne pas pour Chrome sur Linux. La séquence & # 13; & # 10; le fait cependant.
Sam Watkins

51

A noter également, 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 décimal ASCII 10 par un A ASCII hexadécimal de la manière dont il est échappé avec Javascript. Comme ça:

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


@MaxNanasy Accepté, et ils équivalent ( \nsignifie le code de char 10 de toute façon)
rvighne

29

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

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

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


16

Si vous utilisez jQuery:

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

marchera.

testé dans IE-9: fonctionne.


Fonctionné dans MVC 3 Exemple: @ Html.DropDownList ("RegId", null, "Select Region", new {title = "Sélectionnez une région dans le menu déroulant, \ nqui est nécessaire pour obtenir une liste de noms de contrats valides" , @class = "form-control", onchange = "getContractNames (this)", style = "width: 200px;"})
Warren LaFrance

15

En tant que contribution à la &#013;solution, nous pouvons également utiliser &#009des 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

entrez la description de l'image ici


8

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


13
Cette réponse est dépassée; & # 13; fonctionne également dans Chrome et dans d'autres navigateurs.
SaeX

7

Je sais que je suis en retard à la fête, mais pour ceux qui veulent juste voir ça fonctionner, 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>

2
La réponse la plus à jour et fonctionne très bien sur Firefox. Merci.
Marwan مروان

6

Je ne le crois pas. Firefox 2 coupe de toute façon 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ère qu'il appartient à 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 IMO multi-navigateur.


6

&#xD; <----- Ceci est le texte nécessaire pour insérer le retour de port.


1
Fonctionne dans tous les navigateurs :)
MonoThreaded

6

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


6

Nous avions une exigence où nous devions 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

Sur Chrome 79, &#13;ne fonctionne plus.

J'ai réussi avec:

&#13;&#10;

Cela fonctionne dans tous les principaux navigateurs.



4

Utilisez simplement ceci:

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

Vous pouvez ajouter une nouvelle ligne sur le titre en utilisant ceci &#x0a.


4

Utilisez simplement JavaScript. Puis compatible avec la plupart des navigateurs et anciens. Utilisez la séquence d'échappement \ n pour la nouvelle ligne.

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

Quelle version de Chrome? Cela fonctionne pour moi et j'utilise Chrome.
Welshboy

En fait, j'utilise la dernière version de Chrome, cependant, puisque je travaillais sur SVG Elements, cela n'a pas fonctionné, ce n'est pas OK.
NewPHPer

4

Cela &#013;devrait fonctionner si vous utilisez simplement un attribut de titre simple.

sur les popovers bootstrap, il suffit d'utiliser data-html="true" et d'utiliser html dans l' data-contentattribut.

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


3

D'après les informations disponibles sur l'accessibilité et l'utilisation d'infobulles pour les agrandir avec l'utilisation de CR ou de saut de ligne, le fait que les différents navigateurs ne puissent pas / ne soient pas d'accord sur les bases montre qu'ils ne se soucient pas beaucoup de l'accessibilité.


2
Pour une solution très simple de traverser les info-bulles personnalisées du navigateur, voir kollermedia.at/archive/2008/03/24/easy-css-tooltip/…
Dave

@DaveThis est un bon lien, mais le saut de ligne dans la démo se produit en raison de l'attribut width
Melsi

3

Selon cet article sur le site Internet 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 les valeurs d'attribut comme suit:

  • Remplacez les entités de caractère par des caractères,
  • Ignorer les sauts de ligne,
  • Remplacez chaque retour chariot ou 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 info-bulle. La plupart de ces plugins permettent à du HTML arbitraire d'être affiché comme info-bulle d'un élément.


1
Ouais, je sais que ce n'est pas officiel. Vous vous trompez, cependant. Cela ne signifie pas qu'ils ne seront pas affichés. Cela signifie que la spécification W3C ne précise pas comment ils doivent être affichés .... Le but de l'article n'était pas de suggérer qu'ils pourraient être utilisés pour remplacer des plugins plus fonctionnels ... c'était plutôt un cas de dégradation pendant tout le reste.
penderi

@ip: Je me trompe en ce que les recommandations w3c mises à jour suggèrent que les navigateurs divisent le contenu autour du caractère LF. Cependant, les navigateurs implémenteront éventuellement ce comportement.
Salman A

2

Des info-bulles beaucoup plus belles peuvent être créées manuellement et peuvent inclure un 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 tiré du post w3schools à ce sujet. Essayez le code ci-dessus ici .


1

Syntaxe de rasoir

Dans le cas d'ASP.NET MVC, vous pouvez simplement stocker le titre en tant que variable à l'utilisation \r\net cela fonctionnera.

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

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

0

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

ajoutez simplement aucun espace de pause jusqu'à ce qu'il se casse - vous devrez peut-être limiter la taille de l'infobulle en fonction de la quantité de contenu, mais pour les petits messages texte, cela fonctionne:

&nbsp;&nbsp; etc

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


0

J'ai essayé avec "" d'afficher le texte du titre sur une nouvelle ligne et cela fonctionne comme un charme


0

Je suis sur Firefox 68.7.0esr et &#013;cela ne fonctionne pas. Briser les lignes via <CR>a fonctionné, donc je vais avec ça car c'est simple et en avant. c'est à dire

<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk

-1

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


1
Cela ne fait pas partie de la spécification. Doit être un plugin d'aide-info aléatoire
TJ
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.