JSFiddle - React, Tailwind, and code Playground

by chantastic

HTML

<div style="margin-top: 50px">
    some context <a href="#" data-tooltip="true" title="Sample tooltip">Link</a> to wrap around
</div>

SCSS

* {
    font-family: Arial;
}
// http://forrst.com/posts/Simple_pure_CSS_tooltip_with_arrow-BkY
.has-tip {
  position:relative;

  &:hover {
    text-decoration: none;
  }

  &:after {
    display: block;
    position: absolute;

    background: #111; /* fallback */
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 18px;
    color: #fff;
    content: attr(title);
    left: 50%;
    padding: 5px 15px;
    white-space: nowrap;
    z-index: 98;
    font-size: 80%;
  }

  &:before {
    border: solid;
    border-color: #111 transparent; /* fallback */
    border-color: rgba(0,0,0,.8) transparent;
    border-width: 6px 6px 0 6px;
    bottom: 12px;
    content: "";
    display: block;
    left: 75%;
    position: absolute;
    z-index: 99;
  }
}