JSFiddle - React, Tailwind, and code Playground

HTML

<label class="selection-confirm" title="some long tool-tip text goes here"><input type="radio" name="options" value="1" class="required selection-confirm" > Option1</label>
        <label class="selection-confirm" title="some long tool-tip text goes here2222"><input type="radio" name="options" value="1" class="required selection-confirm" > Option1</label>

CSS

#tooltip{
        border-radius:5px;
        border:thin black solid;
        background:red;
        color:white;
        width:200px;
        height:auto;
    }

JavaScript

$('.selection-confirm').mouseover(function(e) {
             var tip = $(this).attr('title');    
            $(this).attr('title','');
            $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');     
            $('#tooltip').css('top', e.pageY + 10 );
            $('#tooltip').css('left', e.pageX + 20 );
            $('#tooltip').fadeIn('500');
            $('#tooltip').fadeTo('10',0.8);
             
        }).mousemove(function(e) {
            $('#tooltip').css('top', e.pageY + 10 );
            $('#tooltip').css('left', e.pageX + 20 );
             
        }).mouseout(function() {
            $(this).attr('title',$('.tipBody').html());
            $(this).children('div#tooltip').remove();
         });