JSFiddle - React, Tailwind, and code Playground

HTML

<div style="color:#ccc">-webkit-animation for :before pseudo element</div>
<ul>
    <li data-tooltip="First tooltip">First tooltip</li>
    <li data-tooltip="Second tooltip">Second tooltip</li>
</ul>

CSS

@-webkit-keyframes show{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes hide{0%{opacity:1}100%{opacity:0}}
li.tip-show:before{-webkit-animation:show 820ms linear}
li.tip-hide:before{-webkit-animation:hide 820ms linear}
li{position:relative;cursor:pointer}
li.tip-show:before{content:'';z-index:1;outline:none}
li.tip-show:before{
    display:block;
    content:attr(data-tooltip);
    position:absolute;
    top:0;
    left:60px;
    padding:10px;
    color:#fff;
    background:#000;
    outline:none;
    text-decoration:none;
    -moz-border-radius:3px;
    border-radius:3px
}

JavaScript

$$('li[data-tooltip]').addEvents({
    mouseover:function(){this.set('class','tip-show')},
    mouseleave:function(){this.set('class','tip-hide')}
});