JSFiddle - React, Tailwind, and code Playground

by Vivekk Upadhyay

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-powertip/1.2.0/jquery.powertip.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-powertip/1.2.0/css/jquery.powertip.min.css">
<div id="element">
    <div>1914 translation by H. Rackham</div>
</div>

CSS

#element div {
    background-color: #EEE;
    border: 1px solid #CCC;
    border-radius: 3px;
    text-align: center;
    width: 400px;
    padding: 40px;
}

JavaScript

// mouse-on examples
$('#element div').data('powertip', $([
    '<img src="https://lh3.googleusercontent.com/-5khUd9Qwc-o/AAAAAAAAAAI/AAAAAAAAAZ0/IUp786Zkfgc/photo.jpg?sz=48" />'].join('\n')));
$('#element div').powerTip({
    followMouse: true
});