html - Add hover text without javascript like we hover on a user's reputation

ID : 10393

viewed : 29

Tags : htmlhoverhtml

Top 5 Answer for html - Add hover text without javascript like we hover on a user's reputation

vote vote

95

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>

vote vote

86

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

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

77

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

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

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

vote vote

68

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.

vote vote

52

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)

Top 3 video Explaining html - Add hover text without javascript like we hover on a user's reputation

Related QUESTION?