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, ultrices sed felis. Integer sodales magna vitae nunc suscipit sit amet viverra turpis molestie. Nullam facilisis nunc et nibh consequat laoreet. Phasellus eros libero, pharetra a vehicula...
CSS
.entry {
position: relative;
right: -200px;
width: 300px;
}
JavaScript
$(function() {
$( document ).tooltip({
items: ".entry",
position: { my: "center", at: "left" },
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>";
}
}
});
});