Wie kann ich einen Zeilenumbruch in einem HTML-Tooltip verwenden?

Question

Ich bin derzeit das Hinzufügen von ausführlichen Tooltips auf unserer Website, und ich möchte (ohne auf eine whizz-bang jQuery-Plugin zurückgreifen, ich weiß, es gibt viele!), um Wagenrücklauf zu verwenden, um die Tooltip-Format.

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

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

Ich habe versucht, die ? mit:

• <br />
• &013; / 

• \r\n
• Environment.NewLine (Ich verwende C#)

Keine der oben genannten Möglichkeiten funktioniert. Ist das möglich?

Answer 1

Es ist ein Hack, aber es funktioniert - (getestet auf Google Chrome und Handy)

Fügen Sie einfach ein nicht umbrechendes Leerzeichen,  , hinzu, bis es umbricht. Möglicherweise müssen Sie die Größe der QuickInfo abhängig von der Menge des Inhalts begrenzen, aber für kleine Textnachrichten funktioniert dies:

   etc

Ich habe alles oben genannte ausprobiert, und das ist das Einzige, was bei mir funktioniert hat.

Answer 2

Ich habe versucht mit 
 um den Titeltext in einer neuen Zeile anzuzeigen, und es funktioniert wunderbar.

Answer 3

Ich benutze Firefox 68.7.0 ESR und die 
 funktioniert nicht. Brechen der Linien über <CR> hat funktioniert, also nehme ich das, weil es einfach ist und weiterhilft.

D.h.,

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

Answer 4

Die "just press enter"-Lösung hat hier nicht funktioniert, also scheint das gute alte Vanilla-JavaScript ein ziemlich effizienter und sauberer Weg zu sein.

function customTitle(event, textHeader, text){
    let eventOrigin = event.target || event.srcElement;
    eventOrigin.title = textHeader + '\n\n' + text;
}

Und bei Element onmouseover:

onmouseover="customTitle(event, 'Some Caput', 'Some more or less complete description');"

Voilà! Es funktioniert mit Google Chrome und Firefox (was andere nicht ausschließt; ich habe es nur nicht überprüft).

Answer 5

Wenn Sie versuchen, dies in einem Reagieren Sie Projekt, das Sie rendern, im folgenden Format:

title={`First line of text ${varOne} 
 Second line of text ${varTwo} 
 Third line of text ${varThree}`}

Entonces 
 , 
 und ähnliche Lösungen funktionieren nicht. Sie werden tatsächlich als Text dargestellt.

Stattdessen ist es besser, den Text tatsächlich nach Bedarf zu erstellen. Ein Beispiel zum besseren Verständnis:

title={`First line of text ${varOne}
Second line of text ${varTwo}
Third line of text ${varThree}`}

Stellen Sie sicher, dass Sie die Tabulatoren/Leerzeichen vor "Zweite Textzeile" und "Dritte Textzeile" entfernen. Andernfalls werden sie ebenfalls gerendert.

Es wurde auf Google Chrome 96 und Firefox 95.0b12 (Developer Edition, weil, na ja, warum nicht) getestet. Es sollte auch auf den meisten modernen Browsern funktionieren.