JSFiddle - React, Tailwind, and code Playground

HTML

<p>Lorem ipsum dolor sit amet <a href=”#” data-tooltip="This is a pure CSS tooltip">hover over this link</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim <a href=”#” data-tooltip="This is a pure CSS tooltip">hover over this link</a> ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
p {
    font-family: Arial, sans-serif;
    margin: 200px auto;
    width: 500px;
}
  
a[data-tooltip]{
    position: relative;
    text-decoration: none;
    border-bottom: solid 1px;
}


a[data-tooltip]:before,
a[data-tooltip]:after{  
    opacity: 0;
    display: none\9;
    position: absolute;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -ms-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
    pointer-events: none;
}

a[data-tooltip]:before {
    content: "";               
    border-top: 8px solid #0090ff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    bottom: 22px; /* 30px - 8px */
    left: 0;
}

a[data-tooltip]:after {
    content: attr(data-tooltip);
    color: #fff;
    bottom: 30px;
    left: -26px;
    background: #0090ff;
    padding: 5px 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    white-space: nowrap;
}

a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
    opacity: 1;
    display: block\9;
}

JavaScript

// Notice pointer-events: none that fix triggering the tooltip when hovering the top of the link.