Simple jQuery Tool Tip

by Erik Bartlow

HTML

<div>
    <ul>
        <li title="This is item 1">Item 1</li>
        <li title="This is item 2">Item 2</li>
        <li title="This is item 3">Item 3</li>
        <li title="This is item 4">Item 4</li>
    </ul>
</div>
<div id="ctAppTipMessage" />

CSS

.ctTip {
    display: none;
    border: solid 1px #5F4C0B;
    background-color: #F2F5A9;
    color: #000000;
}

JavaScript

$
;
(function ($, window, document, undefined) {

    // Create the defaults once
    var ctTip = "ctTip",
        defaults = {
            target: "#ctAppTipMessage",
            tipDuration: 3,
            preventDefaultTitle: true
        };

    // The actual plugin constructor
    function toolTip(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = ctTip;

        this.init();
    }

    toolTip.prototype = {

        init: function () {
            if ($.isEmptyObject(this.options.target)) {
                tipTarget = $(this.options.target);
                tipTarget.addClass('ctTip');
                $('body').append(tipTarget);
            }
            return this.each(function (item, i) {
                var $elem = $(this);
                var message = $elem.attr('title');
                $elem.attr("data-ctTip", true)
                    .attr("data-ctTip-id", "ctTip-" + ($elem.id || i))
                    .attr("data-ctTip-text", message)
                    .on('mouseenter', function () {
                    $(this.options.target).text($elem.attr("data-ctTip-text"));
                    $(this.options.target).show();
                    if (this.options.tipDuration > 0) {
                        setTimeout(function () {
                            $(opts.target).hide();
                        }, parseInt(this.options.tipDuration, 0));
                    }
                })
                    .on('mouseleave', function () {
                    if (this.options.tipDuration === 0) {
                        $(this.options.target).hide();
                    }
                });
                if (this.options.preventDefaultTitle) {
                    $elem.removeAttr('title');
                }
            });
        }

    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple...