it-swarm.com.de

Wie kann ich einen Wagenrücklauf in einer HTML-QuickInfo verwenden?

Momentan füge ich unserer Site ausführliche QuickInfos hinzu, und ich möchte (ohne auf ein jQuery-Plug-In von Whiz-Bang zurückgreifen zu müssen, ich weiß, dass es viele gibt!), Um die QuickInfo mit Wagenrücklauf zu formatieren.

Um den Tipp hinzuzufügen, verwende ich das title Attribut. Ich habe mich auf den üblichen Websites umgesehen und die Basisvorlage von:

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

Ich habe versucht, den ? Durch Folgendes zu ersetzen:

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

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

304
penderi

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

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

Firefox zeigt jedoch keine mehrzeiligen QuickInfos an - die Zeilenumbrüche werden durch nichts ersetzt.

276
Greg

Die neueste Spezifikation erlaubt Zeilenvorschubzeichen, also einen einfachen Zeilenumbruch innerhalb des Attributs oder der Entität &#10; (beachten Sie, dass die Zeichen # und ; sind erforderlich) sind OK.

284
Kornel

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

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

http://modp.com/wiki/htmltitletooltips

Aktualisieren:

Seit Januar 2015 unterstützt Firefox die Verwendung von &#13;, um einen Zeilenumbruch in ein HTML-Attribut title einzufügen. Siehe das Beispiel unten.

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

Getestet in IE, Chrome, Safari, Firefox (neueste Versionen 27.11.2012):
&#13;

Funktioniert in allen von ihnen ...

Ebenfalls erwähnenswert, wenn Sie das title-Attribut mit Javascript wie folgt einstellen:

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

Es wird nicht funktionieren. Sie müssen das ASCII dezimal 10 in ein ASCII hexadezimal A ersetzen, so wie es mit Javascript maskiert ist.

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

49
cprcrack

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

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

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

25
amurra

Wenn Sie jQuery verwenden:

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

wird funktionieren.

getestet in IE-9: funktioniert.

15
Anil Bharadia

Als Beitrag zum &#013; Lösung, wir können auch &#009 für Registerkarten, 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

enter image description here

15
Juan Cortés

Ich weiß, dass ich zu spät zur Party komme, aber für diejenigen, die das nur sehen wollen, ist 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>
7
Ricardo Zea

&#13; funktioniert auf allen gängigen Browsern (einschließlich IE)

7
Greg Dean

Wir hatten eine Anforderung, in der wir all diese testen mussten. Ich möchte Folgendes mitteilen

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

6
student

Wie für wen &#10; hat nicht funktioniert Sie müssen das Element, auf dem Linien sichtbar sind, wie folgt formatieren: white-space: pre-line;

Referenziert von dieser Antwort: https://stackoverflow.com/a/17172412/1460591

5
Youans

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

5
Rehan Khwaja

Ich glaube es nicht. Firefox 2 schneidet lange Link-Titel ohnehin ab und sollte eigentlich nur dazu verwendet werden, 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 mit dem Link verbunden ist. Sie können dann den JavaScript-Code für QuickInfos hinzufügen, um diese Absätze auszublenden und sie beim Bewegen als QuickInfos anzuzeigen. Das ist die beste Wahl, um es browserübergreifend zum Laufen zu bringen.

5
roborourke

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

5
Juan

Benutze 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'
4
Welshboy

Benutze einfach folgendes:

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

Sie können eine neue Zeile zum Titel hinzufügen, indem Sie dieses &#x0a.

4
user3087089

Demnach Artikel auf der w3c-Website :

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

  • Ersetzen Sie Zeicheneinheiten durch Zeichen,
  • Zeilenvorschübe ignorieren,
  • Ersetzen Sie jedes Wagenrücklaufzeichen oder jeden Tabulator durch ein einzelnes Leerzeichen.

Dies bedeutet, dass (mindestens) CR und LF innerhalb des title-Attributs nicht funktionieren. Ich schlage vor, dass Sie ein Tooltip-Plugin verwenden. Die meisten dieser Plugins ermöglichen die Anzeige von beliebigem HTML als Tooltip eines Elements .

3
Salman A

Anhand der verfügbaren Informationen zur Barrierefreiheit und der Verwendung von QuickInfos, mit denen sie mithilfe von CR oder Zeilenumbrüchen erweitert werden, wird geschätzt, dass die verschiedenen Browser sich nicht auf die Grundlagen einigen können/werden.

3
Dave

Diese &#013; sollte funktionieren, wenn Sie nur ein einfaches title-Attribut verwenden.

verwenden Sie bei bootstrap Popovers einfach data-html="true" und benutze html im data-content Attribut.

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

Viel besser aussehende QuickInfos 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 aus dem Beitrag von w3schools entnommen. Experimentieren Sie hier mit dem obigen Code .

2
Chris

Rasiermessersyntax

Im Falle von ASP.NET MVC können Sie den Titel einfach als Variable speichern, indem Sie \r\n Verwenden, und es wird funktionieren.

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

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

hack aber funktioniert - (getestet auf chrome und Handy)

fügen Sie einfach keine Pausen ein, bis es kaputt geht. Je nach Inhalt müssen Sie möglicherweise die Größe der QuickInfos einschränken. Bei kleinen Textnachrichten funktioniert dies jedoch wie folgt:

&nbsp;&nbsp; etc

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

0
Fstarocka Burns