use jQuery UI position for hint

diff --git a/public/mojo_facets.css b/public/mojo_facets.css
index 4144b7b..d067e35 100644 (file)
--- a/public/mojo_facets.css
+++ b/public/mojo_facets.css
@@ -8,6 +8,20 @@
        content: ")";
 }
 
+label span.hint {
+       display: none;
+       position: absolute;
+       background: #fff;
+       color: #888;
+       z-index: 100;
+       padding: 3px;
+}
+
+label:hover span.hint {
+       display: block;
+}
+
+
 span.sort-by {
        float: right;
 }

diff --git a/templates/all_checkboxes.html.ep b/templates/all_checkboxes.html.ep
index 0e034d3..0e46343 100644 (file)
--- a/templates/all_checkboxes.html.ep
+++ b/templates/all_checkboxes.html.ep
@@ -1,13 +1,24 @@
 <a id="all"  href="#">all</a>
 <a id="none" href="#">none</a>
 
+<label for=filter_regex>regex:
 <input type=text name=filter_regex>
+<span class=hint>tab or click outside to apply</span>
 <a id="included" href="#">included</a>
 <a id="excluded" href="#">excluded</a>
+</label>
 
 
 <script type="text/javascript">
 
+$(document).ready( function(){
+
+$('label span.hint').position({
+       my: 'left bottom',
+       at: 'left top',
+       of: $('label input'),
+});
+
 $('a#all').click( function(){
     $("input[type='checkbox']:not([disabled='disabled'])").attr('checked', true);
 });
@@ -43,5 +54,7 @@ $('input[name=filter_regex]').change( function(e) {
        $('a#excluded').text('-' + excluded).show();
 });
 
+}); // document.ready
+
 </script>