JSFiddle - React, Tailwind, and code Playground

by Lisa Poor

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!doctype html>
<body>
<h1 title='tooltip'>0123456789</h1>
</body>

CSS

.ui-tooltip {
        font-family: Courier New;
        font-size:   300%;
    }

JavaScript

$(function() {
        $('h1').tooltip({
            content:  function() { return $(this).attr('title'); },
            position: { my: 'left top', at: 'left top', of: window, collision: 'fit fit' },
            show: { delay: 400 },
            hide:  { effect: '' },
            close: function( event, ui ) {
    ui.tooltip.hover(
        function () {
            $(this).stop(true).fadeTo(400, 1); 
            //.fadeIn("slow"); // doesn't work because of stop()
        },
        function () {
            $(this).fadeOut('400', function(){ $(this).remove(); })
        }
    );
  }
        });
    });