simple hint jquery plugin for textfield

hint message from title

by Seungrae Lee

HTML

<div class="header"> <span>Simple hint plugin example</span>

</div>
<div class="p1">
    <form action="#" class="sample-form" method="post">
        <table>
            <tr>
                <td>Full Name :</td>
                <td>
                    <input type="text" name="fullname" id="fullname" class="auto-hint" value="peter parker" title="Enter full name" />
                </td>
            </tr>
            <tr>
                <td>Email Address:</td>
                <td>
                    <input type="text" name="email" id="email" title="i.e. [email protected]" class="auto-hint" />
                </td>
            </tr>
            <tr>
                <td>Phone Number:</td>
                <td>
                    <input type="text" name="phone" id="phone" title="(123) 123-1234" class="auto-hint" />
                </td>
            </tr>
            <tr>
                <td>Message:</td>
                <td>
                    <textarea cols="15" rows="4" name="message" id="message" class="auto-hint" title="Enter Your Message Here..."></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="submit">Submit</button>
                </td>
            </tr>
        </table>
    </form>
</div>

CSS

BODY {
    background: none repeat scroll 0 0 #F3F1E9;
    color: #444444;
    font-family:"Lucida Grande", Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 20px;
    padding: 20px;
}
INPUT, SELECT {
    width: 150px;
}
INPUT, SELECT, TEXTAREA, BUTTON {
    font-family:"Lucida Grande", Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.sample-form {
    background: none repeat scroll 0 0 #FFFFFF;
    float: left;
    padding: 20px;
}
.header {
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 10px;
    width: 270px;
}
.p1 {
    margin: 10px 0px 0px 0px;
}
.ui-hint-default {
    position: absolute;
    padding: 3px 3px;
    color: #888;
}
.ui-container {
    position: relative;
}
.ui-hint-bg001 {
    position: absolute;
    padding: 3px 3px;
    color: #888;
    font-style: italic;
}

JavaScript

/**
 * options
 *    timeout: fade in/out timeout(default 200ms)
 *    hintClass: css class for hint label
 * usage
 *    $(selector).simpletip({
 *        options here
 *    });
 */
(function ($) {
    $.extend($.fn, {
        simpletip: function (options) {
            return this.each(function () {
                $.creator(this, options);
            });
        }
    });

    // instance creator
    $.creator = function (target, options) {
        if (target.instance) {
            target.instance.init();
        } else {
            target.instance = new $.simpletip(options, target);
        }
        return target.instance;
    };

    // constructor
    $.simpletip = function (options, target) {
        // merge options
        this.o = $.extend(true, {}, $.simpletip.defaults, options);
        this.target = target;
        this.init();
    };

    $.extend($.simpletip, {
        version: '1.0.0',
        defaults: {
            hintClass: 'ui-hint-default',
            timeout: 200
        },
        setDefaults: function (settings) {
            $.extend($.simpletip.defaults, settings);
        },
        prototype: {
            init: function () {
                var $target = $(this.target);
                // create hint label
                this._create($target);
                // add event handler to hint label
                this._prepare($target);
            },
            _create: function (target) {
                var self = this,
                    options = self.o,
                    name = target.attr('name'),
                    title = target.attr('title'),
                    uiDivWrapper = (self.uiDivWrapper = $('<div></div>'))
                        .addClass('ui-container'),
                    label = (self.label = $('<label></label>'))
                        .attr('for', name)
                        .addClass(options.hintClass)
                        .css('width', target.width())
                        .css('height',...