¿Cómo puedo usar un retorno de carro en una información sobre herramientas HTML?

Actualmente estoy agregando información detallada sobre herramientas a nuestro sitio, y me gustaría (sin tener que recurrir a un complemento jQuery whiz-bang, ¡sé que hay muchas!) Para usar retornos de carro para formatear la información sobre herramientas.

Para agregar el consejo, estoy usando el titleatributo. He buscado en los sitios habituales y utilizando la plantilla básica de:

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

He intentado reemplazar el ?con:

• <br />
• &013; / 

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

Ninguno de los anteriores funciona. ¿Es posible?

Es tan simple que te patearás ... ¡solo presiona enter!

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

Sin embargo, Firefox no mostrará información sobre herramientas de varias líneas, reemplazará las nuevas líneas con nada.

La última especificación permite el carácter de avance de línea, por lo que un salto de línea simple dentro del atributo o entidad 
(tenga en cuenta que los caracteres #y ;son obligatorios) están bien.

Prueba el carácter 10. Sin embargo, no funcionará en Firefox. :(

El texto se muestra (si es que lo hay) de una manera dependiente del navegador. La información sobre herramientas pequeña funciona en la mayoría de los navegadores. Información sobre herramientas largas y trabajo de salto de línea en IE y Safari (uso 
o 
para una nueva línea nueva). Firefox y Opera no admiten nuevas líneas. Firefox no admite información sobre herramientas larga.

http://modp.com/wiki/htmltitletooltips

Actualizar:

A partir de enero de 2015, Firefox admite el uso 
para insertar un salto de línea en un titleatributo HTML . Vea el ejemplo de fragmento a continuación.

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

Probado esto en IE, Chrome, Safari, Firefox (últimas versiones 2012-11-27):



Funciona en todos ellos ...

También vale la pena mencionar, si está configurando el atributo de título con Javascript de esta manera:

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

No va a funcionar Debe reemplazar ese ASCII decimal 10 por un ASCII hexadecimal A en la forma en que se escapa con Javascript. Me gusta esto:

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

A partir de Firefox 12, ahora admiten saltos de línea utilizando la entidad HTML de avance de línea: 


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

Esto funciona en IE y es el correcto según la especificación HTML5 para el atributo de título .

Si está utilizando jQuery:

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

trabajará.

probado en IE-9: funcionando.

Como contribución a la 
solución, también podemos usarlo &#009para pestañas si alguna vez necesita hacer algo como esto.

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

Manifestación


 funcionará en todos los navegadores principales (IE incluido)

Sé que llego tarde a la fiesta, pero para aquellos que solo quieren ver que esto funcione, aquí hay una demostración: http://jsfiddle.net/rzea/vsp6840b/3/

HTML utilizado:

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

No lo creo. Firefox 2 recorta títulos largos de enlaces de todos modos y en realidad solo deberían usarse para transmitir una pequeña cantidad de texto de ayuda. Si necesita más texto explicativo, sugeriría que pertenece a un párrafo asociado con el enlace. Luego, puede agregar el código javascript de información sobre herramientas para ocultar esos párrafos y mostrarlos como información sobre herramientas al pasar el mouse sobre ellos. Esa es su mejor apuesta para hacer que funcione IMO entre navegadores.


 <----- Este es el texto necesario para insertar Carry Return.

En Chrome 16, y posiblemente en versiones anteriores, puede usar "\ n". Como nota al margen, "\ t" también funciona

Teníamos un requisito donde necesitábamos probar todo esto, esto es lo que deseo compartir

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

Violín

En Chrome 79, 
ya no funciona.

Tuve éxito con:




Esto funciona en todos los principales navegadores.

En cuanto a quién 
no funcionó, debe diseñar el elemento en el que las líneas son visibles como:white-space: pre-line;

Se hace referencia a partir de esta respuesta: https://stackoverflow.com/a/17172412/1460591

Solo usa esto:

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

Puede agregar una nueva línea en el título con esto &#x0a.

Solo usa JavaScript. Luego compatible con la mayoría de los navegadores antiguos. Use la secuencia de escape \ n para nueva línea.

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

Esto 
debería funcionar si solo usa un atributo de título simple.

en popovers de bootstrap, solo use data-html="true" y use html en el data-contentatributo.

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

A partir de la información disponible sobre accesibilidad y el uso de información sobre herramientas que los hace más grandes con el uso de CR o salto de línea, el hecho de que los distintos navegadores no pueden / no estarán de acuerdo en lo básico muestra que no les importa mucho la accesibilidad.

De acuerdo con este artículo en el sitio web de w3c :

CDATA es una secuencia de caracteres del conjunto de caracteres del documento y puede incluir entidades de caracteres. Los agentes de usuario deben interpretar los valores de los atributos de la siguiente manera:

• Reemplazar entidades de caracteres con caracteres,
• Ignorar los avances de línea,
• Reemplace cada retorno de carro o pestaña con un solo espacio.

Esto significa que (al menos) CR y LF no funcionarán dentro del atributo de título. Le sugiero que use un complemento de información sobre herramientas. La mayoría de estos complementos permiten que se muestre HTML arbitrario como información sobre herramientas de un elemento.

La información sobre herramientas de aspecto mucho más agradable se puede crear manualmente y puede incluir el formato 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>

Esto está tomado de la publicación de w3schools sobre esto. Experimente con el código anterior aquí .

Sintaxis de maquinilla de afeitar

En el caso de ASP.NET MVC, simplemente puede almacenar el título como una variable como uso \r\ny funcionará.

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

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

piratear pero funciona (probado en Chrome y dispositivos móviles)

simplemente no agregue espacios de interrupción hasta que se rompa; es posible que deba limitar el tamaño de la información sobre herramientas según la cantidad de contenido, pero para mensajes de texto pequeños esto funciona:

   etc

Intenté todo lo anterior y esto es lo único que funcionó para mí:

He intentado con "" mostrar el texto del título en una nueva línea y funciona de maravilla

Estoy en Firefox 68.7.0esr y 
no funciona. Romper las líneas a través <CR>funcionó, así que voy con eso ya que es simple y directo. es decir

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

usar data-html="true"y aplicar <br>.