Use tooltip to display hint when combobox input doesn't match anything

diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
index 3001f7d178501fb92096608ae25de2254cc1c8d1..596423bc935d5a4d9f338919a280364ca9c1e23c 100644 (file)
--- a/demos/autocomplete/combobox.html
+++ b/demos/autocomplete/combobox.html
@@ -10,6 +10,7 @@
        <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
        <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
        <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
+       <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
        <link type="text/css" href="../demos.css" rel="stylesheet" />
        <style type="text/css">
                /* TODO shouldn't be necessary */
@@ -41,8 +42,12 @@
                                                delay: 0,
                                                change: function(event, ui) {
                                                        if (!ui.item) {
-                                                               // remove invalid value, as it didn't match anything
-                                                               $(this).val("");
+                                                               var value = this.value;
+                                                               // remove invalid value, as it didn't match anything, and display a hint
+                                                               $(this).val("").attr("title", value + " didn't match any item").tooltip("open");
+                                                               setTimeout(function() {
+                                                                       input.tooltip("close").attr("title", "");
+                                                               }, 2500);
                                                                return false;
                                                        }
                                                        select.val(ui.item.id);
@@ -54,7 +59,7 @@
                                                minLength: 0
                                        })
                                        .addClass("ui-widget ui-widget-content ui-corner-left");
-                               $("<button>&nbsp;</button>")
+                               var button = $("<button>&nbsp;</button>")
                                .attr("tabIndex", -1)
                                .attr("title", "Show All Items")
                                .insertAfter(input)
@@ -75,6 +80,13 @@
                                        input.autocomplete("search", "");
                                        input.focus();
                                });
+                               
+                               input.tooltip({
+                                       position: {
+                                               offset: (button.width() + 5) + " 0"
+                                       },
+                                       tooltipClass: "ui-state-highlight"
+                               });
                        }
                });
 

diff --git a/themes/base/jquery.ui.tooltip.css b/themes/base/jquery.ui.tooltip.css
index 6d8e988bd13a90064030132fe7cc58ee22b783e1..652bf3386e9f4cff25ceb06c410353f6f8bfedc0 100644 (file)
--- a/themes/base/jquery.ui.tooltip.css
+++ b/themes/base/jquery.ui.tooltip.css
@@ -1,7 +1,10 @@
 /* Tooltip
 ----------------------------------*/
 .ui-tooltip {
-       padding:8px; width:100px; position:absolute; z-index:9999;
+       padding:8px;
+       width:125px;
+       position:absolute;
+       z-index:9999;
        -o-box-shadow: 0 0 5px #aaa;
        -moz-box-shadow: 0 0 5px #aaa;
        -webkit-box-shadow: 0 0 5px #aaa;