JSFiddle - React, Tailwind, and code Playground

A tooltip that does not involve extra text nodes (accessibility and SEO purposes).

by Jennifer Perrin

HTML

<p>Lorem ipsum dolor sit amet consequitur.</p>
<p>
  Lorem ipsum
    <span class="outer">
      <a href="javascript:alert('')">Alert!</a>
      <span class="push">
        <span class="inner" title="Javascript&nbsp;alert">
          <span class="arrow"></span>
        </span>
      </span>
    </span>
  dolor sit amet consequitur.
</p>
<p>Lorem ipsum dolor sit amet consequitur.</p>

CSS

* { font-family: sans-serif; }
body { margin: 1em; }

.outer:hover>.push>.inner {
    visibility: visible;
}

.outer:hover>.push>.inner:after {
    content: attr(title);
}

.outer, .push{
    position: relative;
}

.inner {
    position: absolute;
    left: 2px;
    visibility: hidden;
    top: -2px;
    background: #F2DC9B;
    border: 2px solid #E0AF1B;
    border-radius: 5px;
    padding: 0px 5px 2px 4px;
}

.arrow:after  {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    border-color: transparent
                  #E0AF1B
                  transparent
                  transparent;
    top: 2px;
    left: -16px;
}