separar - salto de linea en title html

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

Question

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 muchos!) Para utilizar retornos de carro para dar formato a la información sobre herramientas.

Para agregar la punta estoy usando el atributo de title . He mirado alrededor de 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 #)

Ninguna de las obras anteriores. ¿Es posible?

Answer 1

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 correcto de acuerdo con la especificación HTML5 para el atributo de título .

Answer 2

Como contribución a la 
 solución, también podemos usar &#009 para las 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

Answer 3

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 saltos de línea se aprecia, el hecho de que los distintos navegadores no puedan o no estén de acuerdo en lo básico demuestra que no les importa mucho la accesibilidad.

Answer 4

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

Answer 5

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

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

Answer 6

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 multilínea, reemplazará las nuevas líneas con nada.

Answer 7

Este 
 debería funcionar si solo usas un atributo de título simple.

en las ventanas emergentes de arranque, simplemente use data-html="true" y use html en el atributo de data-content .

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

Answer 8

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

Answer 9

No creo que lo sea. Firefox 2 recorta los títulos de enlaces largos 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 de explicación, sugeriría que pertenezca a un párrafo asociado con el enlace. Luego, podría 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 cursor. Esa es su mejor apuesta para que funcione en la IMO en varios navegadores.

Answer 10

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



Funciona en todos ellos ...

Answer 11

Prueba el carácter 10. Aunque no funcionará en Firefox. :(

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

http://modp.com/wiki/htmltitletooltips

Actualizar:

A partir de enero de 2015, Firefox admite el uso de 
 para insertar un salto de línea en un atributo de title HTML. Vea el siguiente ejemplo de fragmento.

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

Answer 12

Sé que llego tarde a la fiesta, pero para aquellos que solo quieren ver esto funcionando, 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>

Answer 13

Sólo tiene que utilizar JavaScript. Entonces compatible con la mayoría de los navegadores más antiguos. Use la secuencia de escape / n para la nueva línea.

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

Answer 14

Se pueden crear de forma más agradable información sobre herramientas de forma manual, y pueden incluir 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 w3schools sobre esto. Experimenta con el código anterior aquí .

Answer 15

Según 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 atributo de la siguiente manera:

• Reemplazar las 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 del título. Le sugiero que utilice un complemento de información sobre herramientas. La mayoría de estos complementos permiten mostrar HTML arbitrario como información sobre herramientas de un elemento.

Answer 16

Si está utilizando jQuery:

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

trabajará.

Probado en IE-9: trabajando.

Answer 17

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 funcionara Debe reemplazar ese decimal ASCII 10 por un ASCII hexadecimal A en la forma en que se escapó con Javascript. Me gusta esto:

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

Answer 18

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

Fiddle

Answer 19

hackear pero funciona - (probado en chrome y móvil)

simplemente no agregue espacios de descanso hasta que se rompa; es posible que tenga que limitar el tamaño de la información sobre herramientas en función de 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í.

Answer 20

use data-html="true" y aplique <br> .

Answer 21


 trabajará en ie solo

Answer 22


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

Answer 23

Sintaxis de afeitar

En el caso de ASP.NET MVC, puede almacenar el título como una variable para usar /r/n y funcionará.

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

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

Answer 24

Solo usa esto:

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

Puede agregar una nueva línea en el título usando este &#x0a .