My Technical Notes

Wednesday, 5 November 2014

Styling JQuery Tooltip plugin

To style the JQuery Tooltip plugin, I define a JQuery plugin `tooltipX`:


(function ($) {
    $.widget("custom.tooltipX", $.ui.tooltip, {
        options: {
            autoShow: true,
            autoHide: true
        },

        _create: function () {
            this._super();
            if (!this.options.autoShow) {
                this._off(this.element, "mouseover focusin");
            }
        },

        _open: function (event, target, content) {
            this._superApply(arguments);

            if (!this.options.autoHide) {
                this._off(target, "mouseleave focusout");
            }
        }
    });

}(jQuery));

Thereafter I apply it to an element:


$(function () {
    $('.my-tooltipped-elem').tooltipX({ autoHide: false });
});

Once the element is hovered over, then I have an opportunity to style it.

No comments: