Reputation: 3581
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>
Upvotes: 331
Views: 461155
Reputation: 2711
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)
Upvotes: 8
Reputation: 11744
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>
Upvotes: 650
Reputation: 3790
Often i reach for the abbreviation html tag in this situation.
<abbr title="Hover">Text</abbr>
https://www.w3schools.com/tags/tag_abbr.asp
Upvotes: 19
Reputation: 2233
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.
Upvotes: 10
Reputation: 541
The title attribute also works well with other html elements, for example a link...
<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>
Upvotes: 26