JSFiddle - React, Tailwind, and code Playground

HTML

<div id="textboxWorkFlow" style="display:inline-block; position:relative;">
<input type="text" id="workflow" disabled="disabled"/>
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>

CSS

.tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#55606e;
	border-radius:5px;
	padding:10px;
	color:#fff;
	font-size:12px;
    z-index:99999;
    cursor:pointer;
}

JavaScript

$(document).ready(function(){
    var statusMessage="ToDo by Me|Frequency Daily"; //i get it from model
$("#textboxWorkFlow > div").mouseenter(function(){

    if(statusMessage!=null && statusMessage!=undefined && statusMessage!=""){
                    var title = statusMessage;
                    title = title.replace("|", "<br>"); 
                    $(this).data('tipText', title).removeAttr('title');
                    $('<p class="tooltip"></p>')
                    .html(title)
                    .appendTo('body')
                    .fadeIn('slow');
        
                    //alert(title);
                }
                else{
                    var title = "No criteria found";
                    title = title.replace("|", "<br>");
                    $(this).data('tipText', title).removeAttr('title');
                    $('<p class="tooltip"></p>')
                    .html(title)
                    .appendTo('body')
                    .fadeIn('slow');
                }
}).mouseleave(function(){
$(this).attr('val', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function (e) {
                var mousex = e.pageX + 20; //Get X coordinates
                var mousey = e.pageY + 10; //Get Y coordinates
                $('.tooltip').css({ top: mousey, left: mousex 
                })
      });
});