JSFiddle - React, Tailwind, and code Playground

by taylorRichie

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<form>
  <fieldset>
    <div>
      <label for="firstname">Firstname</label>
      <input id="firstname" name="firstname" title="Please provide your firstname." />
    </div>
    <div>
      <label for="lastname">Lastname</label>
      <input id="lastname" name="lastname" title="Please provide also your lastname." />
    </div>
    <div>
      <label for="address">Address</label>
      <input id="address" name="address" title="Your home or work address." />
    </div>
      <form>
<input type="radio" id="male" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
  </fieldset>
</form>

CSS

label {
    display: inline-block; width: 5em;
  }
  fieldset div {
    margin-bottom: 2em;
  }
  fieldset .help {
    display: inline-block;
  }
  .ui-tooltip {
    width: 210px;
  }

JavaScript

$(function() {
    var tooltips = $( "[title]" ).tooltip();
    $( "<button>" )
      .text( "Show help" )
      .button()
      .click(function() {
        tooltips.tooltip( "open" );
      })
      .insertAfter( "form" );
 });

$(function(){
    $( "#male" ).tooltip({
      show: {
        effect: "slideDown",
        delay: 250
      },
        open: function( event, ui ) {
        ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
    });
});