JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<p>This is some content with a couple of links. One <a href="http://www.foo.com" data-tooltip="I am a longer tooltip">has a tooltip</a> and <a href="http://www.foo.com">one does not.</a>

CSS

body {
    font-size: 20px;
    padding: 3rem;
}

a {
    text-decoration: none;
}

a[data-tooltip] {
    position: relative;
    border-bottom: .10rem solid rgba(0, 0, 255, .15);
    -webkit-transition: border .5s;
}

a[data-tooltip]:hover {
    border-bottom-color: rgba(0, 0, 255, .85);
}

a[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;

    padding: .5rem;
    border-radius: 1rem;
    border: .10rem solid transparent;
    background: #eeb;
    opacity: 0;
    transition: opacity .75s;

    top: 0;
    left: 0;
    -webkit-transform: translate(0, -110%);

    font-size: 1rem;
    color: #333;
}

a[data-tooltip]:after {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate(100%, -90%);

    border-top: .5rem solid #eeb;
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;

    background: transparent;
    
        opacity: 0;
    transition: opacity .75s;

}

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