Add hover text without javascript like we hover on

2019-01-30 07:45发布

问题:

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>

回答1:

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>



回答2:

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

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

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



回答3:

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

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


回答4:

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.



标签: html hover