JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="text" title="<b>This</b> <br/>is a example of <br/> break line <stronftooltip" style="margin: 200px 0 0 150px;" />
</div>

CSS

.ui-tooltip {
    background: #FFFF;
    color: black;
    border: 2px solid #a4c8f5;
    padding: 0;
    opacity: 1;
}
.ui-tooltip-content {
    position: relative;
    padding: 1em;
}
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}
.right .ui-tooltip-content::after {
    top: 18px;
    left: -10px;
    border-color: transparent #a4c8f5;
    border-width: 10px 10px 10px 0;
}
.left .ui-tooltip-content::after {
    top: 18px;
    right: -10px;
    border-color: transparent #a4c8f5;
    border-width: 10px 0 10px 10px;
}
.top .ui-tooltip-content::after {
    bottom: -10px;
    left: 72px;
    border-color: #a4c8f5 transparent;
    border-width: 10px 10px 0;    
}
.bottom .ui-tooltip-content::after {
    top: -10px;
    left: 72px;
    border-color: #a4c8f5 transparent;
    border-width: 0 10px 10px;
}

JavaScript

$(function() {
    var tooltips = $( "[title]" ).tooltip({
    position: {
       my: 'center bottom',  // for position, currently it is on top                 
       at: 'center top-10' 
        }
    });
 });

$( "[title]" ).tooltip('option', 'tooltipClass', 'top'); // Added top class here

$("[title]").each(function(){
    $(this).tooltip({ content: $(this).attr("title")});
});    // It allows html content to tooltip.