dicas de ferramentas para o botão


292

É possível criar uma dica de ferramenta para um botão html. É o botão HTML normal e não há atributo Title, pois existe para alguns controles html. Quaisquer pensamentos ou comentários?

Respostas:


559

Basta adicionar um titleao seu button.

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


9
@EduardLuca, no meu caso, a dica de ferramenta realmente não funciona nos disabledbotões porque o Bootstrap define o pointer-events: noneestado desativado. Deverá funcionar se definido pointer-events: autodiretamente para o elemento
Vitaliy Alekask

também, a dica de ferramenta terá como objetivo mostrar a parte inferior de onde o mouse está. Portanto, se o elemento de destino estiver no canto inferior direito da tela, a dica de ferramenta se arrastará sobre o ponteiro do mouse. De maneira mais geral: às vezes a posição da ponta não é inteligente ... mas acho que são apenas os navegadores.
Gideon

1
Há situações em que as dicas de ferramentas são necessárias , mas é importante considerar sua base de usuários ao usar o método nesta resposta. Usei o titleatributo para mostrar um atalho de teclado para um botão, porque os atalhos não são necessários e apenas os dispositivos de toque não usam teclados.
Dave F

mas isso não mostra a dica de ferramenta quando você usa o teclado para focalizar o botão, outro truque para lidar com isso? Acho que esse é um problema de acessibilidade, não?
Nikhil



12

Use titleatributo. É um atributo HTML padrão e, por padrão, é renderizado em uma dica de ferramenta pela maioria dos navegadores de desktop.


O problema que estou lendo, no entanto, destaca que o atributo title não é totalmente suportado por muitos navegadores móveis. No momento, estou pesquisando isso também para alguns problemas da ADA e parece ser apenas um pouco suportado.
Isaac weathers

3
@isaacweathers Bem, como você "passaria o mouse" em um navegador móvel para visualizar o título?
mbomb007

@ mbomb007 -: o estado do foco no iOS com narração é o mais próximo possível do atributo: hover.
isaac resiste


10

Para todos aqui procurando uma solução louca , simplesmente tente

title="your-tooltip-here"

em qualquer tag . Eu testei em td'e a' e funciona bastante.


2
@krillgar, dei uma solução geral que funciona não apenas com o botão, mas com outras tags. Minha intenção era reforçar essa possibilidade.
Davidson Lima

3
em relação ao seu último comentário, já é o que a resposta do skyman estava dizendo anos atrás.
precisa saber é

2

Um botão aceita um atributo "title". Você pode atribuir a ele o valor que deseja que um rótulo apareça quando você passa o mouse sobre o botão.

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


1

O atributo title deve fornecer mais informações. Não é útil para o SEO, portanto, nunca é uma boa ideia ter o mesmo texto no título e alt, que serve para descrever a imagem ou a entrada versus o que ela faz. por exemplo:

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

O atributo title fará uma dica de ferramenta, mas será controlado pelo navegador até onde aparece e como é. Se você deseja ter mais controle, há opções de jQuery de terceiros, muitos modelos de CSS, como o Bootstrap, incorporaram soluções, e você também pode escrever uma solução simples de CSS, se desejar. confira esta solução do w3schools .


-1

Você deve usar os dois atributos title e alt para fazê-lo funcionar em todos os navegadores.

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

1
Por que você deveria usar os dois?
Andrei Cioara

porque algum navegador usa o atributo alt e algum título
Sergey Gurin

5
Absurdo. O altatributo é apenas para válido img, input type="image"e areatags.
bitbitdecker
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.