JSFiddle - React, Tailwind, and code Playground
HTML
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br />
<div id='trigger'>hover me</div>
CSS
#trigger{
margin-right: 60px;
width: 70px;
}
JavaScript
$("#trigger").tooltip({
position: {
my: "center bottom-20", // the "anchor point" in the tooltip element
at: "center top" // the position of that anchor point relative to selected element
},
items: '#trigger',
content: function(response) {
setTimeout( function() {
doIt();
}, 1500);
return 'Testing.<br>testing<br>testing<br>testing<br>testing<br>';
}
});
function doIt(){
$("#trigger").tooltip("close");
var html = '';
for ( var i = 0; i < 2; i++ ){
html += 'Hello ' + i + '<br />';
}
$("#trigger").tooltip({
position: {
my: "center bottom-20", // the "anchor point" in the tooltip element
at: "center top" // the position of that anchor point relative to selected element
},
items: '#trigger',
content: html
});
$("#trigger").tooltip("open");
}