JSFiddle - React, Tailwind, and code Playground

HTML

<span class="navi">
<span class="link">
<a href="" title="Online Services">1</a></span>
<span class="dot" title="Online Services">&bull;</span></span>

CSS

#s-m-t-tooltip {
max-width:300px;
padding:6px 6px 6px 6px;
margin:20px 0px 0px 20px;
background: #fff;
border:1px solid #000;
font-family:arial;
font-size:10px;
letter-spacing:0px;
text-transform:uppercase;
color:#000;
z-index:999999999999999999999999999999999999;
}

.navi .dot { display: none; }
.navi:hover .link { display: none; }
.navi:hover .dot { display: inline; }

JavaScript

(function($){
$(document).ready(function(){
$("span[title]").style_my_tooltips({
tip_follows_cursor:false, 
tip_delay_time:90, 
tip_fade_speed:600, 
attribute:"title"
});
});
})(jQuery);