JSFiddle - React, Tailwind, and code Playground
HTML
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit
libero vitae erat cursus iaculis. In hac habitasse platea dictumst. Fusce
tincidunt sagittis iaculis. Nullam tincidunt auctor vulputate. Donec at
condimentum nisi. Maecenas rutrum ligula id lacus dapibus dapibus auctor
mi aliquam. Fusce tincidunt, arcu non cursus lobortis, leo felis blandit
massa, nec tempus magna nulla id velit. Etiam sit amet nisi erat, eu pharetra
orci. Fusce tincidunt tempor neque, eget sollicitudin est vestibulum sit
amet. Integer nisi ante, auctor sed varius a, gravida sit amet nibh. Pellentesque
fermentum purus sit amet sapien eleifend suscipit. Donec at lectus at enim
semper feugiat. Nam non blandit lacus. Nulla varius tincidunt massa, eget
molestie dui venenatis a. In accumsan imperdiet orci, sed rhoncus urna
feugiat non. Pellentesque tristique eleifend pellentesque. Vivamus elementum,
urna ac vulputate tristique, lectus neque pretium neque, sit amet auctor
dui nunc a augue. Nullam vulputate, nibh vel sodales mollis, mi sem ornare
nisi, vitae sodales quam neque malesuada massa. Vivamus hendrerit, elit
convallis mollis cursus, metus nisl lobortis velit, quis molestie diam
lectus laoreet quam. Ut magna ipsum, vulputate porta hendrerit eu, sagittis
vitae massa. Maecenas semper urna sit amet turpis ultrices pellentesque.
Maecenas nibh quam, ullamcorper nec lacinia eu, molestie ac purus. Suspendisse
eleifend tristique turpis, et placerat libero vestibulum id. Mauris tincidunt
leo vel tortor fringilla faucibus. Aliquam mattis vehicula gravida. Nullam
vehicula fermentum justo ac dapibus. Mauris iaculis urna porttitor nunc
porta ut feugiat eros sagittis. Cras pulvinar eros at dolor pretium at
mattis diam accumsan. In ligula nunc, vulputate vel pellentesque nec,...
CSS
.entry {
position: relative;
right: -200px;
width: 500px;
}
.entry-tooltip-positioner {
position: fixed !important;
left: -130px !important;
}
JavaScript
$(function () {
$(document).tooltip({
items: ".entry",
position: {
my: "right bottom+50"
},
tooltipClass: "entry-tooltip-positioner",
track: true,
content: function () {
var element = $(this);
if ((element.is(".entry"))) {
return "<div class='hi'>This is a very nice entry! It's so pretty and I feel like I can touch it. This is just random filler text.</div>";
}
}
});
});