JSFiddle - React, Tailwind, and code Playground

by Amit Pandya

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/black-tie/jquery-ui.css">
<input title="<span class='red'>Expand to specify advanced job options, such as the quiet period and the retry count.<br><br>See <a href='http://tahiti-stage.us.oracle.com/pls/topic/lookup?ctx=cloud&id=GUID-90C7A060-AFFC-4FC0-8199-AC2A8C5EB97A'>Setting Advanced Options for the Job</a> for more information.</span>" id="chk1" type="checkbox" value="" checked="checked" />Netbeans<br/>
<input title="<span class='red'>This is a <a href='https://www.java.net/' target=”_blank”>java.net</a></span>" id="chk2" type="checkbox" value="" checked="checked" />Java<br/>
<input title="<span class='red'>This is a <a href='https://www.kenai.com/' target=”_blank”>kenai.com</a></span>" id="chk3" type="checkbox" value="" checked="checked" />Kenai<br/>
<input title="<span class='red'>This is a <a href='https://www.oracle.com/' target=”_blank”>oracle.com</a></span>" id="chk4" type="checkbox" value="" checked="checked" />Oracle<br/>

CSS

label {
      display: inline-block;
      width: 5em;
  }
  .red {
      color: red;
  }

JavaScript

$(function () {
    $(document).tooltip({
        content: function () {
            return $(this).prop('title');
        },
        show: null, 
        close: function (event, ui) {
            ui.tooltip.hover(

            function () {
                $(this).stop(true).fadeTo(400, 1);
            },

            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                })
            });
        }
    });
});