Add the "Press Enter" tooltip that appears after a delay when the user has...

Add the "Press Enter" tooltip that appears after a delay when the user has entered a value and stops typing

todo-example/knockoutjs/index.html

@@ -12,7 +12,7 @@
         <div class="content">
             <div id="create-todo">
                 <input id="new-todo" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add" placeholder="What needs to be done?" />
-                <span class="ui-tooltip-top" style="display: none;">Press Enter to save this task</span>
+                <span class="ui-tooltip-top" data-bind="visible: showTooltip" style="display: none;">Press Enter to save this task</span>
             </div>
             <div id="todos">
                 <div data-bind="visible: todos().length">

todo-example/knockoutjs/js/todos.js

@@ -93,6 +93,26 @@
             }
         });
 
+        //track whether the tooltip should be shown
+        self.showTooltip = ko.observable(false);
+        self.showTooltip.setTrue = function() { self.showTooltip(true); }; //avoid an anonymous function each time
+
+        //watch the current value
+        self.current.subscribe(function(newValue) {
+            //if the value was just updated, then the tooltip should not be shown
+            self.showTooltip(false);
+
+            //clear the current timer, as it is actively being updated
+            if (self.showTooltip.timer) {
+                clearTimeout(self.showTooltip.timer);
+            }
+
+            //if there is a value and then show the tooltip after 1 second
+            if (newValue) {
+                self.showTooltip.timer = setTimeout(self.showTooltip.setTrue, 1000);
+            }
+        });
+
         //helper function to keep expressions out of markup
         self.getLabel = function(count) {
             return ko.utils.unwrapObservable(count) === 1 ? "item" : "items";