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

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