fixed #106

Tips are now absolutly positioned and appear when a field gets focused. (at the bottom of each row)

static/css/box.css

@@ -6,6 +6,7 @@ body {
 }
 
 div.row {
+    /*position: relative;*/
     clear: both;
     padding-top: 10px;
     padding-left: 20px;
@@ -24,11 +25,16 @@ input {
     padding: 2px;
 }
 
-input[type=text] {
-    width: 130px
+input[type=text], input[type=password] {
+    width: 140px
 }
 
-input:hover {
+/*input:hover {
+    color: inherit;
+    background-color: #ffffcc;
+}*/
+
+input:focus {
     color: inherit;
     background-color: #ffffcc;
 }
@@ -42,7 +48,7 @@ textarea {
 }
 
 select {
-    width: 135px;
+    width: 145px;
     background-color: #eee;
     border: 1px solid #cccccc;
 }
@@ -106,9 +112,10 @@ td.even {
 
 /* Mootools tooltips */
 .tip {
+    display: none;
+    position: absolute;
     color: #fff;
-    width: 139px;
-    z-index: 13000;
+    z-index: 2;
     border: 1px solid #cccccc;
 }
  
@@ -122,7 +129,7 @@ td.even {
 }
 
 .tip-text {
-    font-size: 11px;
+    font-size: 0.9em;
     padding: 4px 8px 8px;
     background: #eee;
     color: black;

static/js/form.js

@@ -55,11 +55,20 @@ window.addEvent("domready", function() {
 
     $(document.body).addEvent("submit", default_submit);
 
-    $$("input[type!=submit]", "select").each(function(elt) {
-        if ($(elt.name + "_helptext")) {
-            elt.store("tip:title", gettext("Help"));
-            elt.store("tip:text", $(elt.name + "_helptext").get("html"));
-        }
+    $$("input[type!=submit]", "select").addEvents({
+	focus: function(evt) {
+	    var helpdiv = $(evt.target.name + "_helptext");
+	    if (helpdiv) {
+		var coords = evt.target.getCoordinates();
+		helpdiv.setPosition({x: 10, y: coords['top'] + coords['height'] + 5});
+		helpdiv.setStyle("display", "block");
+	    }
+	},
+	blur: function(evt) {
+	    var helpdiv = $(evt.target.name + "_helptext");
+	    if (helpdiv) {
+		helpdiv.setStyle("display", "none");
+	    }
+	}
     });
-    var tip = new Tips($$("input[type!=submit]", "select"));
 });

templates/common/genericform.html

@@ -1,7 +1,11 @@
+{% load i18n %}
 {% for field in form %}
 <div class="row">
   {% if field.help_text %}
-  <div id="{{ field.name }}_helptext" style="display:none">{{ field.help_text}}</div>
+  <div id="{{ field.name }}_helptext" class="tip">
+    <div class="tip-title">{% trans "Help" %}</div>
+    <div class="tip-text">{{ field.help_text}}</div>
+  </div>
   {% endif %}
   {{ field.label_tag }} {{ field }} {% ifequal noerrors False %}{{ field.errors }}{% endifequal %}
 </div>