JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<svg width="400" height="400">
    <rect x="190" y="255" width="70" height="25" class="fixture good tooltipped" id="ines" data-position="top"
          data-delay="50" data-tooltip="Carbonated Drinks<br><a href='#'>View More</a>"
          data-html="true"/>
</svg>

JavaScript

var x = jQuery._data( document.getElementById('ines'), "events" )['mouseout'];
delete jQuery._data( document.getElementById('ines'), "events" )['mouseout'];
$('.material-tooltip').hover(function(e) {
    $(this).attr('hover', 1);
}, function(e) {
    $(this).attr('hover', 0);
    x[0].handler.apply( document.getElementById('ines'), x );
});
$('#ines').on('mouseenter', function(e) {
    $('.material-tooltip:visible').css('pointer-events', 'auto');
}).on('mouseleave', function(e) {
    setTimeout(function() {
        var val = $('.material-tooltip:visible').attr('hover');
        if (val == undefined || val == 0) {
            x[0].handler.apply( document.getElementById('ines'), x );
        }
    }, 150);
})