Come posso utilizzare un ritorno a capo in una descrizione comandi HTML?

Attualmente sto aggiungendo descrizioni dettagliate al nostro sito e mi piacerebbe (senza dover ricorrere a un plugin jQuery whiz-bang, so che ce ne sono molti!) Utilizzare i ritorni a capo per formattare la descrizione comandi.

Per aggiungere il suggerimento sto usando l' titleattributo. Ho guardato in giro i soliti siti e usando il modello base di:

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

Ho provato a sostituire il ?con:

• <br />
• &013; / 

• \r\n
• Environment.NewLine (Sto usando C #)

Nessuna delle precedenti funzioni. È possibile?

È così semplice che ti prenderai a calci ... premi Invio!

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

Firefox non visualizzerà affatto tooltip multilinea - sostituirà le newline con nulla.

Le specifiche più recenti consentono il carattere di avanzamento riga, quindi una semplice interruzione di riga all'interno dell'attributo o dell'entità 
(notare che i caratteri #e ;sono obbligatori) sono OK.

Prova il personaggio 10. Tuttavia, non funzionerà in Firefox. :(

Il testo viene visualizzato (se non del tutto) in modo dipendente dal browser. Piccoli tooltip funzionano sulla maggior parte dei browser. Tooltip lunghi e interruzioni di riga funzionano in IE e Safari (utilizzare 
o 
per una nuova riga). Firefox e Opera non supportano le nuove righe. Firefox non supporta tooltip lunghi.

http://modp.com/wiki/htmltitletooltips

Aggiornare:

A partire da gennaio 2015 Firefox supporta l'utilizzo 
dell'inserimento di un'interruzione di riga in un titleattributo HTML . Vedi l'esempio di frammento di seguito.

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

Testato su IE, Chrome, Safari, Firefox (ultime versioni 27-11-2012):



Funziona in tutti loro ...

Vale anche la pena ricordare che se si imposta l'attributo title con Javascript in questo modo:

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

Non funzionerà Devi sostituire quel decimale ASCII 10 con un esadecimale ASCII A nel modo in cui è sfuggito a Javascript. Come questo:

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

A partire da Firefox 12 ora supportano le interruzioni di riga utilizzando l'entità HTML del feed di riga: 


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

Funziona in IE ed è corretto secondo le specifiche HTML5 per l' attributo title .

Se stai usando jQuery:

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

funzionerà.

testato in IE-9: funzionante.

Come contributo alla 
soluzione, possiamo anche utilizzare le &#009schede se hai mai bisogno di fare qualcosa del genere.

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

dimostrazione


 funzionerà su tutti i principali browser (incluso IE)

So di essere in ritardo alla festa, ma per coloro che vogliono solo vederlo funzionare, ecco una demo: http://jsfiddle.net/rzea/vsp6840b/3/

HTML utilizzato:

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

Non ci credo. Firefox 2 taglia comunque i titoli dei collegamenti lunghi e dovrebbero davvero essere usati solo per trasmettere una piccola quantità di testo di aiuto. Se hai bisogno di più testo esplicativo, suggerirei che appartenga a un paragrafo associato al link. È quindi possibile aggiungere il codice javascript del tooltip per nascondere quei paragrafi e mostrarli come suggerimenti al passaggio del mouse. Questa è la soluzione migliore per far funzionare IMO cross-browser.


 <----- Questo è il testo necessario per inserire Carry Return.

Su Chrome 16, e possibilmente versioni precedenti, puoi utilizzare "\ n". Come sidenote, funziona anche "\ t"

Avevamo un requisito in cui dovevamo testare tutti questi, ecco cosa desidero condividere

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

Violino

Su Chrome 79, 
 non funziona più.

Ho avuto successo con:




Funziona con tutti i principali browser.

Per quanto riguarda chi 
non ha funzionato devi dare uno stile all'elemento su cui sono visibili le linee come:white-space: pre-line;

Riferito a questa risposta: https://stackoverflow.com/a/17172412/1460591

Usa questo:

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

Puoi aggiungere una nuova riga al titolo usando questo &#x0a.

Usa JavaScript. Quindi compatibile con la maggior parte dei browser più vecchi. Utilizzare la sequenza di escape \ n per newline.

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

Questo 
 dovrebbe funzionare se usi semplicemente un attributo title semplice.

su popst bootstrap, basta usare data-html="true" e usare html data-contentnell'attributo.

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

Dalle informazioni disponibili sull'accessibilità e sull'uso di descrizioni dei comandi che le rendono più grandi con l'uso di CR o interruzione di riga, si apprezza il fatto che i vari browser non possano / non concordino sulle nozioni di base, dimostra che a loro non importa molto dell'accessibilità.

Secondo questo articolo sul sito Web di W3C :

CDATA è una sequenza di caratteri dal set di caratteri del documento e può includere entità carattere. Gli interpreti dovrebbero interpretare i valori degli attributi come segue:

• Sostituisci le entità carattere con caratteri,
• Ignora feed di riga,
• Sostituisci ogni ritorno a capo o scheda con un singolo spazio.

Ciò significa che (almeno) CR e LF non funzioneranno all'interno dell'attributo title. Ti suggerisco di usare un plugin tooltip. La maggior parte di questi plugin consente di visualizzare HTML arbitrario come descrizione comandi di un elemento.

Tooltip dall'aspetto molto più bello possono essere creati manualmente e possono includere la formattazione 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>

Questo è tratto dal post di w3schools su questo. Sperimenta con il codice sopra qui .

Sintassi del rasoio

Nel caso di ASP.NET MVC puoi semplicemente archiviare il titolo come variabile come funziona \r\ne funzionerà.

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

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

hack ma funziona - (testato su Chrome e dispositivi mobili)

aggiungi solo spazi di interruzione fino a quando non si interrompe: potresti dover limitare la dimensione della descrizione comando in base alla quantità di contenuto, ma per i messaggi di testo di piccole dimensioni funziona:

   etc

Ho provato tutto sopra e questa è l'unica cosa che ha funzionato per me -

Ho provato con "" per visualizzare il testo del titolo in una nuova riga e funziona come un incantesimo

Sono su Firefox 68.7.0esr e il 
non funziona. Rompere le linee <CR>ha funzionato, quindi vado avanti con questo, dal momento che è semplice e avanzato. vale a dire

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

usare data-html="true"e applicare <br>.