Tooltips

by lgedeon

HTML

<br>
<br>
Here is <span data-tooltip="A tooltip">something wide to center</span> under.
<br>
&nbsp;
<br>
&nbsp;
<br>
&nbsp;
<br>
Here is something <span data-tooltip="Another tooltip">.</span> very narrow to center under.

CSS

span[data-tooltip] {
  background: #123456;
  color: #abcdef;
  position: relative;
}
span[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    top: 1.5em;
    left: 50%;
    padding: 4px 6px;
    font-weight: 700;
    background: #000;
    color: #fff;
    overflow: visible;
    width: auto;
    word-wrap: normal;
    white-space: nowrap;
    z-index: 999;
}

span[data-tooltip]:after {
    content: '';
    display: none;
    width: 0;
    height: 0;
    border: .5em solid #000;
    border-color: transparent transparent #000 transparent;
    position: absolute;
    top: .5em;
    left: 50%;
}

span[data-tooltip]:hover:after, span[data-tooltip]:hover:before {
    display: block;
}