JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="test" data-text="<a href='#'>Link</a>"></div>
<div class="test" data-text="<h2>Lorem</h2>"></div>
<div class="test" data-text="Ipsum"></div>
<div class="test">text</div>
<div class="test"></div>

CSS

.test {
    float: left;
    clear: both;
    margin: 10px;
    padding: 10px;
    border: 1px solid #888;
}

JavaScript

$(document).ready(function() {

    $('.test').each(function() {
    
        var obj = $(this),
            objD = obj.data();

        $(document).on("mouseenter mouseleave", function( e ) {

            var objHtml = e.type === "mouseenter" ? objD.text : '';
            objD.text && obj.html( objHtml );
      
        });
    
    });

});