JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css">
<script src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
<span data-tipsy-title="outer span">
    outer
    <span data-tipsy-title="inner span">inner span</span>
    span
</span>

CSS

span {
    border : 10px solid red;
}
span span{
    border : 10px solid blue;
}

JavaScript

$('span')
    .tipsy({
        title : function(){
            return $(this).data('tipsy-title');
        }        
    })
   .on('mousemove', function(e){
       // prevent the event from bubbling up
       e.stopPropagation();
       
       // force a hide on other targeted elements (suchas the span parent)
       $('span').not(this).tipsy('hide');
       
       // force a show on this element (such as thespan parent)
       $(this).tipsy('show');
    });