Adicione texto suspenso sem javascript, como pairamos na reputação de um usuário

262

No stackoverflow, quando passamos o mouse sobre a reputação de um usuário, vemos um texto. Eu já vi isso em muitos lugares e o código fonte diz que isso pode ser feito sem js. E eu tentei e consegui apenas isso-

 <div="text">hover me</div>
html hover Cinza
fonte

Respostas:

495

Use o titleatributo, por exemplo: 

<div title="them's hoverin' words">hover me</div>
Expandir snippet

ou: 

<span title="them's hoverin' words">hover me</span>
Expandir snippet

gcochard
fonte
3
é mesmo como quando pairar sobre a reputação de um usuário
Ash
1
Sim, se você olhar o código-fonte da reputação, verá que o atributo title está definido como reputation score.
gcochard
6
@ Kevin Esta solução é realmente melhor que a solução JavaScript, pois funcionará em navegadores com JavaScript desativado e também adiciona uma dica para rastrear os leitores sobre o conteúdo do elemento.
Gcochard
1
@KevinMeredith Eu diria que a única medida pela qual a solução JS seria melhor é que você não pode estilizar o texto que aparece e é deixado apenas com a implementação nativa.
zero298
1
@ David d C e Freitas: obrigado para iluminar StackOverflow com sua edição desta resposta ... não sei como realmente marcá-lo, mas oh bem
Meredith
16

O atributo title também funciona bem com outros elementos html, por exemplo, um link ...

<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>
Slavomir
fonte
15

Frequentemente, busco a tag abreviação html nessa situação.

<abbr title="Hover">Text</abbr>

https://www.w3schools.com/tags/tag_abbr.asp

Harry Bosh
fonte
7
Esse elemento deve ser usado especificamente para indicar abreviações, portanto, essa não é uma boa ideia. Você está dizendo aos sistemas de conversão de texto em fala para pronunciá-lo como uma abreviação. Use <span>se você quiser apenas um texto suspenso.
Lars Marius Garshol
8

Você está procurando uma dica de ferramenta

Para a dica de ferramenta básica, você deseja:

<div title="This is my tooltip">

Para uma versão javascript mais sofisticada, você pode procurar:

http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632

O link acima fornece 12 opções para dicas de ferramentas.

Abk
fonte