información sobre herramientas para el botón

292

¿Es posible crear una información sobre herramientas para un botón html. Es el botón HTML normal y no hay ningún atributo de Título, ya que está allí para algunos controles html. ¿Alguna idea o comentario?

html button tooltip SARAVAN
fuente

Respuestas:

559

Simplemente agregue un titlea su button.

<button title="Hello World!">Sample Button</button>
Expandir fragmento

Muad'Dib
fuente
99
@EduardLuca, en mi caso, la información sobre herramientas realmente no funciona en los disabledbotones porque Bootstrap establece el pointer-events: noneestado deshabilitado. Debería funcionar si se establece pointer-events: autodirectamente en el elemento.
Vitaliy Alekask
también es eso, la información sobre herramientas tendrá como objetivo mostrar la parte inferior desde donde está el mouse. Entonces, si el elemento de destino está en la parte inferior derecha de la pantalla, la información sobre herramientas se arrastra sobre el puntero del mouse. En términos más generales: la posición de la punta a veces no es inteligente ... pero supongo que solo son los navegadores.
gideon
1
Hay situaciones en las que la información sobre herramientas es necesaria , pero es importante tener en cuenta su base de usuarios al utilizar el método en esta respuesta. Utilicé el titleatributo para mostrar un atajo de teclado para un botón porque los atajos no son necesarios y los dispositivos táctiles no usan teclados.
Dave F
pero esto no muestra información sobre herramientas cuando usa el teclado para enfocar el botón, ¿algún otro truco para manejar esto? Supongo que este es un problema de accesibilidad, ¿no?
Nikhil
Referencia: HTML Living Standard 3.2.6.1 El atributo de título .
Ludovic Kuty
43

ambos <button>etiquetan y <input type="button">aceptan un atributo de título.

Gabriele Petrioli
fuente
¿Qué pasa con los enlaces HTML simples usando <a>y href?
Aaron Franke
1
@AaronFranke sí a, así como todas las etiquetas admiten el titleatributo. Ver developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
Gabriele Petrioli el
12

Usar titleatributo Es un atributo HTML estándar y, de forma predeterminada, la mayoría de los navegadores de escritorio lo muestran en una información sobre herramientas.

Skyman
fuente
Sin embargo, el problema que estoy leyendo destaca que el atributo de título no es totalmente compatible con muchos navegadores móviles. Actualmente estoy investigando esto también para algunos problemas de ADA y parece que solo es algo compatible.
Isaac resiste el
3
@isaacweathers Bueno, ¿cómo se "desplazaría" en un navegador móvil, de todos modos, para ver el título?
mbomb007
@ mbomb007 -: el estado de enfoque en iOS con voz en off es lo más cercano posible al atributo: hover.
Isaac resiste el
Los enlaces son fantásticos, pero nunca deberían ser la única información en su respuesta. Cuando alguien va a Stack Exchange, la pregunta "respuesta" debería contener una respuesta. No solo un montón de instrucciones hacia la respuesta.
Erik Philips
10

Para todos los que buscan una solución loca , simplemente intente

title="your-tooltip-here"

en cualquier etiqueta . He probado en td'sy a' s y funciona bastante.

Davidson Lima
fuente
2
@krillgar, di una solución general que funciona no solo con botones sino también con otras etiquetas. Mi intención era reforzar esta posibilidad.
Davidson Lima
3
con respecto a su último comentario, ya es lo que la respuesta de skyman decía hace años.
Pac0
2

Un botón acepta un atributo "título". Luego puede asignarle el valor que desea que aparezca una etiqueta cuando coloca el mouse sobre el botón.

<button type="submit" title="Login">
Login</button>
Expandir fragmento

Félix Urrutia
fuente
1

El atributo de título está destinado a dar más información. No es útil para SEO, por lo que nunca es una buena idea tener el mismo texto en el título y el alt, que está destinado a describir la imagen o la entrada, es lo que hace. por ejemplo:

<button title="prints out hello world">Sample Buttons</button>

<img title="Hms beagle in the straits of magellan" alt="HMS Beagle painting" src="hms-beagle.jpg" />

El atributo title hará una sugerencia de herramienta, pero será controlado por el navegador hasta donde aparezca y cómo se vea. Si desea más control, existen opciones jQuery de terceros, muchas plantillas css como Bootstrap tienen soluciones integradas, y también puede escribir una solución css simple si lo desea. echa un vistazo a esta solución de w3schools .

AU Crawford
fuente
-1

Debe usar los atributos de título y alt para que funcione en todos los navegadores.

<button title="Hello World!" alt="Hello World!">Sample Button</button>
Sergey Gurin
fuente
1
¿Por qué deberías usar ambos?
Andrei Cioara
porque algunos navegadores usan el atributo alt y algún título
Sergey Gurin
55
Disparates. El altatributo sólo es válido para img, input type="image"y arealas etiquetas.
bitbitdecker