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

budget/static/css/main.css

@@ -1,6 +1,7 @@
 @import "bootstrap.min.css";
 @import "../fonts/fontfaces.css";
 @import "jquery-ui.css";
+@import "jquery.qtip.min.css";
 
 html, body{
     margin-top: 25px;

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 %}

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(){