JSFiddle - React, Tailwind, and code Playground

by quinnirill

HTML

<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<a href="#">
  Link to some content
  <div class="tooltip">
    <button>Delete link</button>
    <button>Verify link</button>
  </div>
</a>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>
<p>absxsijd aisjd iasd ijasd iasdj ias</p>

CSS

a[href] {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 170%;
  left: 30%;

  background-color: #fc6;
  width: auto;
  height: auto;
  padding: 5px;
  border-radius: 3px;
}

.tooltip:after {
  content: ""; 
  position: absolute;
  left: 30%;
  top: 100%;

  border-top: 20px solid #fc6;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

:not(:hover) > .tooltip {
  display: none;
}