JSFiddle - React, Tailwind, and code Playground

by sarahu

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<p>
    <label for="age">Your age:</label>
    <input id="age" data-title="We ask for your age only for statistical purposes." />
</p>

JavaScript

$.widget('custom.myTooltip', $.ui.tooltip, {
    options: {
        tooltipClass: 'my_tooltip',
        allTooltips: []
    },
    _listTooltips: [],
    _strSelector: '',
    _create: function () {
        var arr, t, tip, _i, _len, _ref;
        this.options.defaultOptions = {
            disabled: this.options.disabled,
            hide: this.options.hide,
            position: this.options.position,
            show: this.options.show,
            tooltipClass: this.options.tooltipClass,
            track: this.options.track
        };
        arr = [];
        _ref = this.options.allTooltips;
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            tip = _ref[_i];
            t = $.extend({}, this.options.defaultOptions, tip);
            this._listTooltips.push(t);
            arr.push(t.items);
        }
        this._strSelector = arr.join(',');
        this._setOption('items', this._strSelector);
        this._superApply();
        return $(document).on('mouseover,focusin', this._strSelector, function (event) {
            return this.open(event);
        });
    },
    open: function (event) {
        var flag, i, target, tip;
        flag = true;
        i = 0;
        if (event != null) {
            target = $(event.target).closest(this._strSelector);
            if (target.is(this._strSelector)) {
                while (flag) {
                    tip = this._listTooltips[i];
                    if (tip == null) {
                        flag = false;
                    }
                    if (flag && target.is(tip.items)) {
                        $.extend(this.options, tip);
                        flag = false;
                    }
                    i += 1;
                }
            }
        }
        return this._super(event);
    }
});



$(document).myTooltip({allTooltips:[{
    items: 'input[title]',
    content: function () {
    return $(this).attr('title')
    }
},
    {
          items: '[data-title]',
         ...