Is there a jQuery plugin for fading textbox hints?

Question

I was wondering whether there is a jQuery plugin available which can show hints in a textbox when it is empty.

What I found was: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/. However, this just acts as the placeholder HTML5 attribute. What I'm looking for is rather a plugin that shows multiple hints with fading, as on http://www.wolframalpha.com/. (Edit: I mean the grey text in the textbox - not the tooltip.)

Although it might not be too much trouble to create it myself, I don't subscribe to the theory of reinventing the wheel - so does anyone know if such a plugin is already available?

Thanks.

pimvdb · Accepted Answer · 2011-03-26T12:18:08.760

I made one up myself, so that it fits my needs completely: http://jsfiddle.net/42t6R/2/.

It's simple but it works just nicely.

Edit: New version which has less bugs, also why not submit it as a plugin :)

http://plugins.jquery.com/project/fadehints

http://jsfiddle.net/9rgHg/2/

(function( $, undefined ) {

    $.fn.fadehints = function( data, speed ) {
        var i = 0;
        var $this = $( this );
        var offset = $this.offset();
        var $input = $("<input>").css( "position",          "absolute"                 )
                                 .css( "left",              offset.left                )
                                 .css( "top",               offset.top                 )
                                 .css( "background-color",  "transparent"              )
                                 .css( "color",             "gray"                     )
                                 .css( "border",            0                          )
                                 .css( "padding",           2                          )
                                 .css( "font-size",         $this.css( "font-size"   ) )
                                 .css( "font-family",       $this.css( "font-family" ) );

        var $parent = $this.parent();
        var $div = $( "<div>" ).append( $this.detach(), $input );

        var change = function() {
            if( i >= data.length ) {
                i = 0;
            }
            $input.hide().val( data[i] ).fadeIn( 1000 );
            i++;
        };

        $this.bind( "focus keydown", function(e) {
            if( !( e.bubbles == null ) ) { // Only clear if event was triggered by user
                window.clearInterval( interval );
                $input.hide();
            }
        } );

        $input.bind( "click focus", function() {
            window.clearInterval( interval );
            $this.focus(); // $this === the real textbox
            $( this ).hide(); // $(this) === the overlap textbox
        } );

        $this.click( function() {
            $input.hide();
            window.clearInterval( interval );
        } );

        $this.blur( function() {
            window.clearInterval( interval );
            if( $this.val() === "" && $this[0] !== document.activeElement ) {
                if( !$input.is(":visible")) {
                change();
                }
                interval = window.setInterval( change, speed );
            }
        } );
        $parent.append( $div );

        change(true);
        var interval = window.setInterval( change, speed );


        return $this;
    };

})(jQuery);

$(function() {
    $('#tb').fadehints([
        "test1", "test2"
    ]);
});

score 0 · Answer 2 · answered Mar 25 '11 at 16:26

0

This may help: http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

answered Mar 25 '11 at 16:26

mattsven

22,305
11
68
104

Thanks a lot. However, I'm actually not looking for a tooltip but rather a sample text (in gray for example) which is put in the textbox to show what can be put in it. – pimvdb Mar 25 '11 at 16:27

score 0 · Answer 3 · answered Mar 25 '11 at 16:30

0

Hey there primvdb, what about this?

answered Mar 25 '11 at 16:30

Hacknightly

5,109
1
26
27

I might be wrong but does it support fading and multiple values too? – pimvdb Mar 25 '11 at 16:32

score 0 · Answer 4 · answered Mar 25 '11 at 16:30

0

Try this : http://jqueryfordesigners.com/coda-popup-bubbles/ It should be what you're looking for.

answered Mar 25 '11 at 16:30

3rgo

3,115
7
31
44

Well, that's not realy much to do with textboxes and a sample value. I actually mean the textbox on http://www.wolframalpha.com/, not that tooltip thing. – pimvdb Mar 25 '11 at 16:33

Is there a jQuery plugin for fading textbox hints?

4 Answers4