JSFiddle - React, Tailwind, and code Playground

by webspicer

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<script src="//www.math.cmu.edu/~gautam/share2/plugins/jQuery.pTooltip/jQuery.pTooltip.js"></script>
<b title='ptooltip-1'>This</b> element shows a tooltip.
So does <b title='ptooltip-2'>this</b> one.
<br /> <br />
<input title="ptooltip-2" type="text" name="name" id="name" value="" tabindex="1" />

<div id='ptooltip-1'>
    This tool tip will stay open if you hover over it.
</div>
<div id='ptooltip-2a'>
    This is another "persistent" tool tip.
    It can have <a href='#'>links</a> that the user can interact with.
    Or some more fancy content.
</div>

<div id='ptooltip-2s'>
    <form>
      <input name="fname" type="text" class="feedback-input" placeholder="First Name" id="fname" />
      <input name="lname" type="text" class="feedback-input" placeholder="last Name" id="lname" />
        <input name="email" type="text" class="feedback-input" id="email" placeholder="Email" />
        <textarea name="text" class="feedback-input" id="comment" placeholder="Comment"></textarea>
    </form>
</div>

CSS

input
{
    cursor: move;
}

JavaScript

$('[title|=ptooltip-2]').pTooltip();
$("#name").hide();

setTimeout(function() { $("#name").show(); }, 5000);