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

Question

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-    lt div  text  gt hover me lt  div gt

User · Answer

Often i reach for the abbreviation html tag in this situation    lt abbr title  Hover  gt Text lt  abbr gt   https   www w3schools com tags tag abbr asp

User · Answer

Use the title attribute  for example      x000D   x000D   lt div title  them s hoverin  words  gt hover me lt  div gt  x000D   x000D   x000D    or       x000D   x000D   lt span title  them s hoverin  words  gt hover me lt  span gt  x000D   x000D   x000D

User · Answer

You re looking for tooltip  For the basic tooltip  you want    lt div title  This is my tooltip  gt      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

User · Answer

This can also be done in CSS  for more customisability   x000D   x000D   hoverable     position  relative      hoverable gt  hoverable  tooltip     display  none      hoverable hover gt  hoverable  tooltip     display  inline    position  absolute    top  1em    left  1em    background   888    border  1px solid black    x000D   lt div class  hoverable  gt     lt span class  hoverable  main  gt Main text lt  span gt     lt span class  hoverable  tooltip  gt Hover text lt  span gt   lt  div gt  x000D   x000D   x000D    Obviously  styling can be improved

User · Answer

The title attribute also works well with other html elements  for example a link      lt a title  hover text  ng-href    getUrl      gt  download link  lt  a gt

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

Examples related to html

Examples related to hover