Skip to content
Permalink
Browse files

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

  • Loading branch information
jzaefferer committed Apr 8, 2010
1 parent 6204e1a commit e7882fa393dcd5effb8a8997f99622ab88774cad
Showing with 19 additions and 4 deletions.
  1. +15 −3 demos/autocomplete/combobox.html
  2. +4 −1 themes/base/jquery.ui.tooltip.css
@@ -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"
});
}
});

@@ -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;

0 comments on commit e7882fa

Please sign in to comment.
You can’t perform that action at this time.