JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/sunny/jquery-ui.css">
<br/>
<a id="aSlideDown" href="#" title="Tooltip Shown using Slide Down">Tooltip Using Slide Down Effect</a><br/><br/>
<a id="aFoldandShake" href="#" title="Tooltip Shown using Fold and Shake">Tooltip Using Fold and Shake</a><br/><br/>
<a id="aDropandClip" href="#" title="Tooltip Shown using Bounce and Puff">Tooltip Using Bounce and Puff</a><br/><br/>

CSS

body
{
    font-size:11pt;
    padding:10px;
    font-family:Calibri;
}

.ui-tooltip
{
    font-size:8pt;
    font-family:Tahoma;
}

JavaScript

$(function() {
    $("#aSlideDown").tooltip({
        show: {
            effect: "slideDown",
            delay: 250
        },
    });
    $("#aFoldandShake").tooltip({
        show: {
            effect: "fold",
            delay: 250
        },
        hide: {
            effect: "shake",
            delay: 250
        }
    });
    $("#aDropandClip").tooltip({
        show: {
            effect: "bounce",
            delay: 250
        },
        hide: {
            effect: "puff",
            delay: 250
        }
    });
});