Documentos recientes
- Presupuesto reforma cocina versión final definitiva.pdf
- Fotos.zip
- Contrato de alquiler firmado por ambas partes 2026.docx
- Notas.txt
Texto recortado que se completa
Los nombres largos se cortan con puntos suspensivos y solo esos enseñan el texto entero al pasar o enfocar.
Ajustes
Código
<div class="uv-ttx"><p>Documentos recientes</p><ul><li tabindex="0"><span class="ic" aria-hidden="true">pdf</span><span class="nm">Presupuesto reforma cocina versión final definitiva.pdf</span></li><li tabindex="0"><span class="ic" aria-hidden="true">zip</span><span class="nm">Fotos.zip</span></li><li tabindex="0"><span class="ic" aria-hidden="true">docx</span><span class="nm">Contrato de alquiler firmado por ambas partes 2026.docx</span></li><li tabindex="0"><span class="ic" aria-hidden="true">txt</span><span class="nm">Notas.txt</span></li></ul></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Tooltips
Ver todos: TooltipsDónde usarlo
Las listas de archivos, las tablas y las barras laterales recortan los nombres largos para mantener las filas ordenadas, pero hay que poder leerlos. Esta lista revisa cada fila y solo añade tooltip a los nombres que de verdad se cortan, enseñando el texto completo arriba tras un breve retraso al pasar o con el foco del teclado. Los nombres cortos no muestran nada.
La comprobación se repite al cambiar el tamaño o el texto, así que se adapta a diseños responsive y traducciones. Las filas recortadas reciben además un aria-label con el nombre completo.