Autocomplete With Tooltips

Applying jQuery UI tooltips to autocomplete items.

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css">
<label for="books" class="ui-widget">Book:</label>
<input id="books" class="ui-widget ui-widget-content ui-corner-all" />

CSS

body {
    font-size: 0.8em;
}

input {
    padding: 0.2em;
}

/*
 * Theme: Fix the corner radius
 *
 */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 2px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 2px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 2px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 2px;
}

/*
 * Theme: Fix the tooltip box-shadow color.
 *
 */
.ui-tooltip {
    box-shadow: 0 0 5px #a6c9e2;
}

/*
 * Theme: Fix the background image for hover and focus states
 *
 */
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background-image: none;
}

JavaScript

(function( $ ) {

    // Default tooltip position.    
    var ttpos = $.ui.tooltip.prototype.options.position;

    // Autocomplete widget extension to provide description
    // tooltips.
    $.widget( "app.autocomplete", $.ui.autocomplete, {
        
        _create: function() {
            
            this._super();
            
            // After the menu has been created, apply the tooltip
            // widget. The "items" option selects menu items with
            // a title attribute, the position option moves the tooltip
            // to the right of the autocomplete dropdown.
            this.menu.element.tooltip({ 
                items: "li[title]",
                position: $.extend( {}, ttpos, {
                    my: "left+12",
                    at: "right"
                })
            });
            
        },
        
        // Clean up the tooltip widget when the autocomplete is
        // destroyed.
        _destroy: function() {
            this.menu.element.tooltip( "destroy" );
            this._super();
        },
        
        // Set the title attribute as the "item.desc" value.
        // This becomes the tooltip content.
        _renderItem: function( ul, item ) {
            return this._super( ul, item )
                .attr( "title", item.desc );
        }
    });
    
    $(function() {
        
        // Autocomplet instance with demo data. Notice each
        // object has a desc attribute.
        $( "#books" ).autocomplete({
            source: [
                { value: 1, label: "Book 1", desc: "Here is book 1" },
                { value: 2, label: "Book 2", desc: "Here is book 2" },
                { value: 3, label: "Book 3", desc: "Here is book 3" }
            ]
        });
        
    });
    
})( jQuery );