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

HtmlHover

Html Problem Overview

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>

Html Solutions

Solution 1 - Html

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>

Solution 2 - Html

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

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

Solution 3 - Html

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

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

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

Solution 4 - Html

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.

Solution 5 - Html

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)

Categories
Recommended Html Solutions
Recommended Hover Solutions

Previous Solution:

Python 3: UnboundLocalError: local variable referenced before assignment

PythonPython 3.xScope

Next Solution:

Node.js / Express.js - How does app.router work?

node.jsMiddlewareExpress

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAshView Question on Stackoverflow
Solution 1 - HtmlgcochardView Answer on Stackoverflow
Solution 2 - HtmlSlavomirView Answer on Stackoverflow
Solution 3 - HtmlHarry BoshView Answer on Stackoverflow
Solution 4 - HtmlAbkView Answer on Stackoverflow
Solution 5 - HtmlArtemisView Answer on Stackoverflow