316

In stackoverflow, when we hover on a user's reputation we see a text. I have seen this at many places and the source code tells me that it can be done without js. And i tried and got only this-

 <div="text">hover me</div>
Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Ash
  • 3,431
  • 2
  • 15
  • 15

5 Answers5

621

Use the title attribute, for example: 

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

or: 

<span title="them's hoverin' words">hover me</span>
Shubham Chaudhary
  • 47,722
  • 9
  • 78
  • 80
gcochard
  • 11,408
  • 1
  • 26
  • 41
  • 7
    is it same like when we hover on reputation of a user – Ash Jun 13 '12 at 20:34
  • 1
    Yes, if you look at the source code for the reputation, you'll see that the title attribute is set to `reputation score`. – gcochard Jun 13 '12 at 20:35
  • Out of curiosity, is this solution "not as good" as the JavaScript solution? I'm not claiming it is, but I'm curious what the JS solution is, and how it compares to yours, @Greg? By the way, thanks for your solution. – Kevin Meredith Jul 02 '13 at 16:37
  • 8
    @Kevin This solution is in fact better than the JavaScript solution since it will work on browsers with JavaScript disabled, and it also adds a hint to screen readers about the contents of the element. – gcochard Jul 02 '13 at 17:45
  • 1
    @KevinMeredith I would say that the only measure by which the JS solution would be better is in that you cannot style the text that appears and are left with the native implementation only. – zero298 Nov 25 '14 at 19:12
  • Nice answer @gcochard. Say I would like to show 10 line of text hovering on a certain text. Using this method some of the lines are out of the hovering page. Is there any size attribute controlling that ? – Amir Oct 23 '15 at 09:29
  • MDN [mentions](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) some accessibility concerns. – Nil Jun 27 '18 at 23:34
  • 2
    @David d C e Freitas: thank you for brightening StackOverflow with your edit to this answer ... don't know how to actually tag you but oh well – Meredith Jan 07 '19 at 09:44
  • You might want to add, when you set a div/p/etc element it will show the hover text whenever you hover over any part of the element (more than just where the text shows) you might want to surround your text in a span element (the second example) – Ethan O'Brien Jan 28 '22 at 21:22
24

The title attribute also works well with other html elements, for example a link...

<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>
Slavomir
  • 351
  • 2
  • 8
19

Often i reach for the abbreviation html tag in this situation.

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

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

Harry Bosh
  • 3,611
  • 2
  • 36
  • 34
  • 19
    That element is specifically meant to be used to indicate abbreviations, so this is not a good idea. You're telling text-to-speech systems to pronounce it as an abbreviation. Use `` if you just want a hover text. – Lars Marius Garshol Jan 10 '19 at 08:40
9

You're looking for tooltip

For the basic tooltip, you want:

<div title="This is my tooltip">

For a fancier javascript version, you can look into:

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

The above link gives you 12 options for tooltips.

Abk
  • 2,137
  • 1
  • 23
  • 33
7

This can also be done in CSS, for more customisability:

.hoverable {
  position: relative;
}

.hoverable>.hoverable__tooltip {
  display: none;
}

.hoverable:hover>.hoverable__tooltip {
  display: inline;
  position: absolute;
  top: 1em;
  left: 1em;
  background: #888;
  border: 1px solid black;
}
<div class="hoverable">
  <span class="hoverable__main">Main text</span>
  <span class="hoverable__tooltip">Hover text</span>
</div>

(Obviously, styling can be improved)

Artemis
  • 2,553
  • 7
  • 21
  • 36