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

330

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; / &#13;
  • \r\n
  • Environment.NewLine (Estoy usando C #)

Ninguno de los anteriores funciona. ¿Es posible?

penderi
fuente
Es bastante complicado, pero puede haber una solución alternativa. Cambia todos los espacios en tu título a un espacio continuo &nbsp;. Luego, coloca espacios donde quieras que los saltos de línea. También es posible que deba agregar un montón de &nbsp;caracteres antes de su espacio (salto de línea).
jumxozizi

Respuestas:

292

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.

Greg
fuente
69
Esta respuesta anticuado, Firefox hace nuevas líneas de visualización de títulos ahora (estoy usando v25). Se trabaja con \n, \u000Ay \x0A.
Halcyon el
1
@Halcyon, solo para aclarar a otros lectores, los tres códigos anteriores no parecen ser HTML. Se parecen más a secuencias de escape de cadenas de lenguaje derivadas de C.
Sam
3
@ Sam, no entiendo lo que quieres decir con eso. \x0A(byte) es el código de caracteres que corresponde con una nueva línea. Lo mismo para \u000A(unicode). \nTambién es nueva línea.
Halcyon
13
@Halcyon, intenté insertar esas secuencias de escape en un titleatributo en Firefox y Chrome, y se presentaron literalmente en la información sobre herramientas. Después, me di cuenta de que probablemente estaba usando esa sintaxis como una forma de comunicar qué caracteres (no secuencias de escape) deberían usarse. Mi comentario es para ahorrar tiempo a otras personas advirtiéndoles que no intenten poner sus secuencias de escape en su HTML para que no pierdan el tiempo como lo hice yo.
Sam
44
@Tarquin No funcionan en HTML, solo funcionan específicamente en las comillas dobles de PHP porque esa es una característica de las comillas dobles de PHP.
Brilliand
307

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 &#10;(tenga en cuenta que los caracteres #y ;son obligatorios) están bien.

Kornel
fuente
44
no es compatible con Chrome, pero para Firefox ¡bien!
Alaeddine
55
Intenté ambos &#10;y &#13;. &#13;no honraría los "saltos de línea" previstos en la versión 50.0.2661.94 de Chrome (64 bits). &#10;funciona bien en las versiones actuales de Chrome, Firefox y Opera (todas para Ubuntu de 64 bits) y la versión 11.0 de Internet Explorer y algunos cambios en Windows.
Tass
Esto es particularmente útil para mí porque estaba tratando de hacer eso en el editor de publicaciones de Wordpress.
ed1nh0
13
& # 10; funciona de maravilla en IE, Firefox y Chrome. ¡Gracias!
Daniel
Para cromo & # 013; ....... Ejemplo: title = "title1 & # 13; title2 & # 13; title3"
Malik Zahid
75

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 &#10;o &#13;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 &#13;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>

Stefan Mai
fuente
2
+1. Si decide usar un complemento jQuery, para una accesibilidad óptima, debe leer su contenido del atributo de título y sustituir algún carácter invisible arbitrario por un salto de línea en tiempo de ejecución.
Kent Fredric
+1. Cosas interesantes. Todavía hay el problema de que algunas UA recortan el título cuando aparece: FF2, según recuerdo, pero eso no es un problema en estos días.
roborourke
3
A partir de enero de 2015, Firefox admite el uso &#13;de un titleatributo para insertar un salto de línea.
pseudosavant
No pude hacer que los saltos de línea funcionen en IE11 en un elemento SVG <title>. ¿Alguien ha tenido más éxito con eso? Intenté los códigos de char mencionados arriba / abajo, ninguno parece funcionar.
RemEmber
64

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

Funciona en todos ellos ...

Morten Repsdorph Husfeldt
fuente
El primer método (dividir líneas en el código) parece más simple, pero no es compatible con los programas de formato automático de código js.
horiatu
@Camilo Martin, newline y linefeed son iguales en todas las plataformas. &#10;es el salto de línea de Unix al igual que el salto de línea de Windows. Del mismo modo, &#13;es la nueva línea para ambas plataformas. La especificación especifica el carácter de salto de línea (LF) que, por supuesto, está &#10;en ambas plataformas (¿todas?).
matty
2
@matty No estoy seguro si te entiendo: lo correcto de usar parece ser el Unix LF(que es un salto de línea estándar entre protocolos y herramientas), CRsolo fue utilizado por Macs antiguas (y otras plataformas oscuras) y parece fuera de lugar.
Camilo Martin
Pido disculpas por mi confusa elección de palabras. Lo que llamé un salto de línea (# 10) es realmente una nueva línea, aunque a menudo se la conoce como LF. Lo que llamé una nueva línea (# 13) es realmente un retorno de carro. En cualquier caso, mi punto era que esos valores son los mismos en todas las plataformas. El hecho de que Windows (usando ambos caracteres para terminar una línea) y Mac (usando el carácter "incorrecto" para terminar una línea) no sea relevante con respecto a qué entidad HTML se usará en un atributo de título. La especificación dice &#10;, aunque aparentemente también &#13;funciona en muchas circunstancias.
matty
2
llano & # 13; No funciona para Chrome en Linux. La secuencia & # 13; # 10; lo hace, sin embargo.
Sam Watkins el
51

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

divElement.setAttribute("title", "Line one&#10;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");

cprcrack
fuente
@MaxNanasy De acuerdo, y su equivalente ( \nsignifica el código de char 10 de todos modos)
rvighne
29

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

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

amurra
fuente
16

Si está utilizando jQuery:

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

trabajará.

probado en IE-9: funcionando.

Anil Bharadia
fuente
Trabajó en MVC 3 Ejemplo: @ Html.DropDownList ("RegId", null, "Select Region", new {title = "Seleccione una región del menú desplegable, \ nque se requiere para obtener una lista de nombres de contratos válidos" , @class = "form-control", onchange = "getContractNames (this)", style = "width: 200px;"})
Warren LaFrance
15

Como contribución a la &#013;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

ingrese la descripción de la imagen aquí

Juan cortés
fuente
8

&#13; funcionará en todos los navegadores principales (IE incluido)

Greg Dean
fuente
13
Esta respuesta está desactualizada; & # 13; funciona en Chrome y otros navegadores también.
SaeX
7

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>
Ricardo Zea
fuente
2
La respuesta más actualizada, y funciona muy bien en Firefox. Gracias.
Marwan مروان
6

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.

Roborourke
fuente
6

&#xD; <----- Este es el texto necesario para insertar Carry Return.

Juan
fuente
1
Funciona en todos los navegadores :)
MonoThreaded
6

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

Rehan Khwaja
fuente
6

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

Mohammed Zameer
fuente
6

En Chrome 79, &#13;ya no funciona.

Tuve éxito con:

&#13;&#10;

Esto funciona en todos los principales navegadores.

David Vielhuber
fuente
5

En cuanto a quién &#10;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

Youans
fuente
1
¿Este estilo debe aplicarse a qué? ¿El título? como a[title]?
Mohammed Zameer
4

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.


fuente
4

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'
Galés
fuente
¿Qué versión de Chrome? Funciona para mí y estoy usando Chrome.
Galés
En realidad, estoy usando la última versión de Chrome, sin embargo, dado que estaba trabajando en SVG Elements, no funcionó, no está bien.
NewPHPer
4

Esto &#013;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>

csandreas1
fuente
3

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.

Dave
fuente
2
Para obtener una solución muy sencilla para cruzar información sobre herramientas personalizadas del navegador, consulte kollermedia.at/archive/2008/03/24/easy-css-tooltip/…
Dave
@DaveEste es un buen enlace, sin embargo, el salto de línea en la demostración ocurre debido al atributo de ancho
Melsi,
3

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.

Salman A
fuente
1
Sí, sé que no es oficial. Estás equivocado, sin embargo. No significa que no se mostrarán. Significa que la especificación W3C no indica cómo deberían mostrarse .... El objetivo de la publicación no era sugerir que podrían usarse para reemplazar complementos más funcionales ... fue más un caso de que durante la degradación se puede usar cualquier otra cosa.
penderi
@ip: Me equivoco porque las recomendaciones actualizadas de w3c sugieren que los navegadores dividen el contenido alrededor del carácter LF. Sin embargo, los navegadores implementarán este comportamiento eventualmente.
Salman A
2

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

Chris
fuente
1

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>
Shelby115
fuente
0

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:

&nbsp;&nbsp; etc

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

Quemaduras de Fstarocka
fuente
0

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

Niket Joshi
fuente
0

Estoy en Firefox 68.7.0esr y &#013;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
usuario3416126
fuente
-1

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

Nithin C
fuente
1
Esto no es parte de la especificación. Debe ser un complemento de información sobre herramientas al azar
TJ