JSFiddle - React, Tailwind, and code Playground

by sampottinger

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p>
    <label for="age">Your age:</label>
    <input id="age" title="We ask for your age only for statistical purposes." />
</p>
<p>Hover the field to see the tooltip.</p>

CSS

.ui-tooltip, .arrow:after {
    background: #B94A48;
}
.ui-tooltip {
    padding: 10px 15px;
    color: white;
    font: 14px "Helvetica Neue", Sans-Serif;
}
.arrow {
    width: 50px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
}
.arrow.top {
    top: -16px;
    bottom: auto;
}
.arrow.left {
    left: 20%;
}
.arrow:after {
    content:"";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
}
.arrow.top:after {
    bottom: -20px;
    top: auto;
}

JavaScript

$(function () {
    $(document).tooltip({
        position: {
            my: "center top+10",
            at: "center bottom",
            using: function (position, feedback) {
                $(this).css(position);
                $("<div>")
                    .addClass("arrow")
                    .addClass("icon-warning-sign")
                    .addClass(feedback.vertical)
                    .addClass(feedback.horizontal)
                    .appendTo(this);
            }
        }
    });
});