Wie kann ich einen Wagenrücklauf in einem HTML-Tooltip verwenden?

330

Ich füge unserer Website derzeit ausführliche Tooltips hinzu und möchte (ohne auf ein Whiz-Bang-jQuery-Plugin zurückgreifen zu müssen, ich weiß, dass es viele gibt!) Wagenrückläufe zum Formatieren des Tooltips verwenden.

Um den Tipp hinzuzufügen, verwende ich das titleAttribut. Ich habe mich auf den üblichen Websites umgesehen und die grundlegende Vorlage verwendet:

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

Ich habe versucht, das ?durch zu ersetzen :

  • <br />
  • &013; / &#13;
  • \r\n
  • Environment.NewLine (Ich benutze C #)

Keines der oben genannten funktioniert. Ist es möglich?

penderi
quelle
Es ist ziemlich schwierig, aber es könnte eine Problemumgehung geben. Ändern Sie alle Leerzeichen in Ihrem Titel in ein nicht unterbrechendes Leerzeichen &nbsp;. Setzen Sie dann Leerzeichen an die gewünschten Stellen. Möglicherweise müssen Sie &nbsp;vor Ihrem Leerzeichen auch eine Reihe von Zeichen hinzufügen (Zeilenumbruch).
Jumxozizi

Antworten:

291

Es ist so einfach, dass Sie sich selbst treten ... drücken Sie einfach die Eingabetaste!

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

Firefox zeigt jedoch überhaupt keine mehrzeiligen Tooltips an - es ersetzt die Zeilenumbrüche durch nichts.

Greg
quelle
68
Diese Antwort ist veraltet. Firefox zeigt jetzt Zeilenumbrüche in Titeln an (ich verwende Version 25). Es arbeitet mit \n, \u000Aund \x0A.
Halcyon
1
@Halcyon, nur um anderen Lesern zu verdeutlichen, die obigen drei Codes scheinen kein HTML zu sein. Sie ähneln eher C-abgeleiteten Escape-Sequenzen für Sprachzeichenfolgen.
Sam
3
@ Sam Ich verstehe nicht, was du damit meinst. \x0A(Byte) ist der Zeichencode, der einer neuen Zeile entspricht. Gleiches gilt für \u000A(Unicode). \nist auch newline.
Halcyon
13
@Halcyon, ich habe versucht, diese Escape-Sequenzen in ein titleAttribut in Firefox und Chrome einzufügen, und sie wurden nur buchstäblich im Tooltip dargestellt. Danach wurde mir klar, dass Sie diese Syntax wahrscheinlich verwenden, um zu kommunizieren, welche Zeichen (keine Escape-Sequenzen) verwendet werden sollen. Mein Kommentar dient dazu, anderen Menschen Zeit zu sparen, indem sie gewarnt werden, nicht zu versuchen, Ihre Escape-Sequenzen in ihren HTML-Code einzufügen, damit sie keine Zeit wie ich verschwenden.
Sam
4
@Tarquin Sie funktionieren nicht in HTML, sondern nur in doppelten Anführungszeichen von PHP, da dies eine Funktion der doppelten Anführungszeichen von PHP ist.
Brilliand
307

Die neueste Spezifikation erlaubt Zeilenvorschubzeichen, sodass ein einfacher Zeilenumbruch innerhalb des Attributs oder der Entität &#10;(beachten Sie, dass Zeichen #und ;erforderlich sind) in Ordnung ist.

Kornel
quelle
4
Es wird nicht von Chrome unterstützt, aber für Firefox in Ordnung!
Alaeddine
5
Ich habe beides versucht &#10;und &#13;. &#13;beabsichtigte "Zeilenumbrüche" in der Chrome-Version 50.0.2661.94 (64-Bit) würden nicht berücksichtigt. &#10;funktioniert gut in aktuellen Versionen von Chrome, Firefox und Opera (alle für 64-Bit-Ubuntu) und Internet Explorer Version 11.0 und einigen Änderungen unter Windows.
Tass
Dies ist besonders nützlich für mich, da ich versucht habe, dies im Wordpress-Post-Editor zu tun.
ed1nh0
13
& # 10; funktioniert wunderbar in IE, Firefox und Chrome. Vielen Dank!
Daniel
Für Chrom & # 013; ....... Beispiel: title = "title1 & # 13; title2 & # 13; title3"
Malik Zahid
75

Versuchen Sie es mit Charakter 10. In Firefox funktioniert es jedoch nicht. :(

Der Text wird (wenn überhaupt) browserabhängig angezeigt. Kleine Tooltips funktionieren in den meisten Browsern. Lange QuickInfos und Zeilenumbrüche funktionieren in IE und Safari (verwenden &#10;oder &#13;für eine neue Zeile). Firefox und Opera unterstützen keine Zeilenumbrüche. Firefox unterstützt keine langen Tooltips.

http://modp.com/wiki/htmltitletooltips

Aktualisieren:

Ab Januar 2015 unterstützt Firefox das &#13;Einfügen eines Zeilenumbruchs in ein HTML- titleAttribut. Siehe das folgende Snippet-Beispiel.

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

Stefan Mai
quelle
2
+1. Wenn Sie sich für die Verwendung eines jQuery-Plugins entscheiden, sollte es für eine optimale Zugänglichkeit seinen Inhalt aus dem title-Attribut lesen und zur Laufzeit einen Zeilenumbruch durch ein beliebiges unsichtbares Zeichen ersetzen.
Kent Fredric
+1. Interessantes Zeug. Es gibt immer noch das Problem, dass einige UAs den Titel kürzen, wenn er auftaucht - FF2, wie ich mich erinnere, aber das ist heutzutage weniger ein Problem.
Roborourke
3
Ab Januar 2015 unterstützt Firefox die Verwendung &#13;eines titleAttributs zum Einfügen eines Zeilenumbruchs.
Pseudosavant
Ich konnte keine Zeilenumbrüche in IE11 in einem SVG-Element zum Laufen bringen <title>. Hat jemand damit mehr Erfolg gehabt? Versucht die oben / unten genannten Zeichencodes, scheint keiner zu funktionieren.
RemEmber
64

Getestet in IE, Chrome, Safari, Firefox (neueste Versionen 2012-11-27):
&#13;

Funktioniert in allen ...

Morten Repsdorph Husfeldt
quelle
Die erste Methode (Zeilenumbrüche im Code) scheint einfacher zu sein, steht jedoch nicht für js-Code-Programme zur automatischen Formatierung.
Horiatu
@Camilo Martin, Newline und Linefeed sind plattformübergreifend gleich. &#10;ist der Unix-Linefeed genauso wie der Windows-Linefeed. Ebenso &#13;ist die Newline für beide Plattformen. Die Spezifikation gibt das LF-Zeichen (Linefeed) an, das sich natürlich &#10;auf beiden (allen?) Plattformen befindet.
Matty
2
@matty Ich bin mir nicht sicher, ob ich Sie verstehe - die richtige Verwendung scheint das Unix zu sein LF(das ein Standard-Linefeed für Protokolle und Tools ist), CRdas nur von alten Macs (und anderen obskuren Plattformen) verwendet wurde und fehl am Platz zu sein scheint.
Camilo Martin
Ich entschuldige mich für meine verwirrende Wortwahl. Was ich als Linefeed (# 10) bezeichnet habe, ist wirklich eine neue Zeile, obwohl sie oft als LF bezeichnet wird. Was ich als Newline (# 13) bezeichnet habe, ist wirklich ein Wagenrücklauf. In jedem Fall war mein Punkt, dass diese Werte auf allen Plattformen gleich sind. Die Tatsache, dass Windows (beide Zeichen zum Beenden einer Zeile verwenden) und Mac (zum Beenden einer Zeile das "falsche" Zeichen verwenden) sollten für die Verwendung der HTML-Entität in einem title-Attribut irrelevant sein. Die Spezifikation sagt &#10;, obwohl anscheinend auch &#13;unter vielen Umständen funktioniert.
Matty
2
einfach & # 13; funktioniert nicht für Chrome unter Linux. Die Sequenz & # 13; & # 10; tut jedoch.
Sam Watkins
51

Erwähnenswert auch, wenn Sie das title-Attribut mit Javascript wie folgt festlegen:

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

Es wird nicht funktionieren. Sie müssen diese ASCII-Dezimalzahl 10 durch eine ASCII-Hexadezimalzahl A ersetzen, so wie sie mit Javascript maskiert ist. So was:

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

cprcrack
quelle
@ MaxNanasy Einverstanden, und sie entsprechen ( \nbedeutet sowieso Zeichencode 10)
rvighne
29

Ab Firefox 12 unterstützen sie jetzt Zeilenumbrüche mithilfe der Zeilenvorschub-HTML-Entität: &#10;

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

Dies funktioniert im IE und ist gemäß der HTML5-Spezifikation für das title-Attribut korrekt .

Amurra
quelle
16

Wenn Sie jQuery verwenden:

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

wird funktionieren.

getestet in IE-9: funktioniert.

Anil Bharadia
quelle
Arbeitete in MVC 3 Beispiel: @ Html.DropDownList ("RegId", null, "Region auswählen", neu {title = "Wählen Sie eine Region aus dem Dropdown-Menü aus, die erforderlich ist, um eine Liste gültiger Vertragsnamen abzurufen." , @class = "form-control", onchange = "getContractNames (this)", style = "width: 200px;"})
Warren LaFrance
15

Als Beitrag zur &#013;Lösung können wir auch &#009Registerkarten verwenden, wenn Sie jemals so etwas tun müssen.

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

Demo

Geben Sie hier die Bildbeschreibung ein

Juan Cortés
quelle
8

&#13; funktioniert auf allen Hauptbrowsern (IE eingeschlossen)

Greg Dean
quelle
13
Diese Antwort ist veraltet; & # 13; funktioniert auch in Chrome und anderen Browsern.
SaeX
7

Ich weiß, dass ich zu spät zur Party komme, aber für diejenigen, die nur sehen möchten, dass dies funktioniert, hier eine Demo: http://jsfiddle.net/rzea/vsp6840b/3/

Verwendetes HTML:

<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>
Ricardo Zea
quelle
2
Die aktuellste Antwort und funktioniert hervorragend unter Firefox. Vielen Dank.
Marwan
6

Ich glaube nicht, dass es so ist. Firefox 2 schneidet ohnehin lange Link-Titel ab und sie sollten eigentlich nur verwendet werden, um eine kleine Menge Hilfetext zu übermitteln. Wenn Sie mehr Erklärungstext benötigen, würde ich vorschlagen, dass er in einen Absatz gehört, der dem Link zugeordnet ist. Sie können dann den Tooltip-Javascript-Code hinzufügen, um diese Absätze auszublenden und sie beim Hover als Tooltips anzuzeigen. Das ist die beste Wahl, damit es browserübergreifend funktioniert.

Roborourke
quelle
6

&#xD; <----- Dies ist der Text, der zum Einfügen von Carry Return benötigt wird.

Juan
quelle
1
Funktioniert in allen Browsern :)
MonoThreaded
6

In Chrome 16 und möglicherweise früheren Versionen können Sie "\ n" verwenden. Als Nebenbemerkung funktioniert "\ t" auch

Rehan Khwaja
quelle
6

Wir hatten eine Anforderung, bei der wir all dies testen mussten. Hier ist, was ich teilen möchte

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/>

Geige

Mohammed Zameer
quelle
6

Funktioniert auf Chrome 79 &#13;nicht mehr.

Ich war erfolgreich mit:

&#13;&#10;

Dies funktioniert in allen gängigen Browsern.

David Vielhuber
quelle
5

Für wen Sie &#10;nicht gearbeitet haben, müssen Sie das Element, auf dem Linien sichtbar sind, wie folgt gestalten:white-space: pre-line;

Aus dieser Antwort geht hervor: https://stackoverflow.com/a/17172412/1460591

Youans
quelle
1
Dieser Stil muss auf was angewendet werden? Der Titel? wie a[title]?
Mohammed Zameer
4

Verwenden Sie einfach dies:

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

Sie können dem Titel eine neue Zeile hinzufügen &#x0a.


quelle
4

Verwenden Sie einfach JavaScript. Dann kompatibel mit den meisten und älteren Browsern. Verwenden Sie die Escape-Sequenz \ n für Zeilenumbrüche.

   document.getElementById("ElementID").title = 'First Line text \n Second line text'
Welshboy
quelle
Welche Version von Chrome? Es funktioniert für mich und ich benutze Chrome.
Welshboy
Eigentlich verwende ich die neueste Version von Chrome. Da ich jedoch an SVG Elements gearbeitet habe, hat es nicht funktioniert, es ist nicht in Ordnung.
NewPHPer
4

Dies &#013;sollte funktionieren, wenn Sie nur ein einfaches Titelattribut verwenden.

Verwenden Sie bei Bootstrap-Popovers einfach data-html="true" HTML im data-contentAttribut.

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

csandreas1
quelle
3

Aus den verfügbaren Informationen zur Barrierefreiheit und der Verwendung von Tooltips, die sie durch die Verwendung von CR oder Zeilenumbruch vergrößern, geht hervor, dass die verschiedenen Browser sich nicht auf Grundlagen einigen können / wollen, zeigt, dass ihnen die Barrierefreiheit nicht besonders wichtig ist.

Dave
quelle
2
Eine sehr einfache Lösung zum Überqueren von browserspezifischen
Dave
@ DaveThis ist ein netter Link, aber der Zeilenumbruch in der Demo passiert wegen des width-Attributs
Melsi
3

Laut diesem Artikel auf der w3c-Website :

CDATA ist eine Folge von Zeichen aus dem Dokumentzeichensatz und kann Zeichenentitäten enthalten. Benutzeragenten sollten Attributwerte wie folgt interpretieren:

  • Ersetzen Sie Zeichenentitäten durch Zeichen.
  • Zeilenvorschübe ignorieren,
  • Ersetzen Sie jeden Wagenrücklauf oder jede Lasche durch ein einzelnes Leerzeichen.

Dies bedeutet, dass (zumindest) CR und LF innerhalb des title-Attributs nicht funktionieren. Ich schlage vor, dass Sie ein Tooltip-Plugin verwenden. Mit den meisten dieser Plugins kann beliebiges HTML als Tooltip eines Elements angezeigt werden.

Salman A.
quelle
1
Ja, ich weiß, dass es nicht offiziell ist. Du liegst jedoch falsch. Dies bedeutet nicht, dass sie nicht angezeigt werden. Dies bedeutet, dass in der W3C-Spezifikation nicht angegeben ist, wie sie angezeigt werden sollen .... Der Sinn des Beitrags war nicht, vorzuschlagen, dass sie verwendet werden könnten, um mehr funktionale Plugins zu ersetzen. Es war eher ein Fall, in dem während des Abbaus alles andere verwendet werden kann.
Penderi
@ip: Ich irre mich darin, dass aktualisierte w3c-Empfehlungen darauf hindeuten, dass Browser den Inhalt um das LF-Zeichen aufteilen. Browser werden dieses Verhalten jedoch eventuell implementieren.
Salman A
2

Viel besser aussehende Tooltips können manuell erstellt werden und HTML-Formatierungen enthalten.

<!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>

Dies ist dem Beitrag von w3schools zu diesem Thema entnommen . Experimentieren Sie hier mit dem obigen Code .

Chris
quelle
1

Rasiermessersyntax

Im Fall von ASP.NET MVC können Sie den Titel einfach als Variable als Verwendung speichern \r\nund es wird funktionieren.

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

<h3 title="@logTooltip">Logs</h3>
Shelby115
quelle
0

Hack funktioniert aber - (auf Chrome und Mobile getestet)

Fügen Sie einfach keine Unterbrechungszeichen hinzu, bis es unterbrochen wird. Möglicherweise müssen Sie die Größe der QuickInfos abhängig von der Menge des Inhalts begrenzen. Bei kleinen Textnachrichten funktioniert dies jedoch:

&nbsp;&nbsp; etc

Versuchte alles oben und dies ist das einzige, was für mich funktioniert hat -

Fstarocka Burns
quelle
0

Ich habe mit "" versucht, Titeltext in einer neuen Zeile anzuzeigen, und es funktioniert wie ein Zauber

Niket Joshi
quelle
0

Ich bin auf Firefox 68.7.0esr und das &#013;funktioniert nicht. Das Brechen der Zeilen über <CR>hat funktioniert, also gehe ich damit um, da es einfach und vorwärts ist. dh

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

verwenden data-html="true"und anwenden <br>.

Nithin C.
quelle
1
Dies ist nicht Teil der Spezifikation. Muss ein zufälliges Tooltip-Plugin sein
TJ