Add QTip2 and use it to display a message about access code on the first page.

2 files changed, 22 insertions, 0 deletions

diff --git a/budget/templates/home.html b/budget/templates/home.html
index 013cde7..d21d0ec 100644
--- a/budget/templates/home.html
+++ b/budget/templates/home.html
@@ -39,4 +39,25 @@
     </div>
     </div>
 </div>
+<script>
+    $(document).ready(function(){
+        $('form.create #password').qtip({
+            content: '{{ _("This access code will be sent to your friends. It is stored as-is by the server, so don\\'t reuse a personal password here!") }}',
+            show: {
+                event: 'focus'
+            },
+            hide: {
+                event: 'focusout'
+            },
+            position: {
+                my: "bottom center",
+                at: "top center",
+                adjust: {
+                    method: 'shift'
+                }
+               
+            }
+        });
+    });
+</script>
 {% endblock %}
diff --git a/budget/templates/layout.html b/budget/templates/layout.html
index d4447e6..293ce75 100644
--- a/budget/templates/layout.html
+++ b/budget/templates/layout.html
@@ -7,6 +7,7 @@
     <link rel=stylesheet type=text/css href="{{ url_for("static", filename='css/main.css') }}">
     <script src="{{ url_for("static", filename="js/jquery-1.6.2.min.js") }}"></script>
     <script src="{{ url_for("static", filename="js/ihatemoney.js") }}"></script>
+    <script src="{{ url_for("static", filename="js/jquery.qtip.min.js") }}"></script>
     {% block head %}{% endblock %}
     <script type="text/javascript" charset="utf-8">
         $(document).ready(function(){