From 5b7ebd9141738bcffad944b2ed1864315e6a5eaf Mon Sep 17 00:00:00 2001
From: tonio <tonio@ngyn.org>
Date: Mon, 3 Jan 2011 13:43:44 +0100
Subject: [PATCH] fixed #106

Tips are now absolutly positioned and appear when a field gets focused. (at the bottom of each row)
---
 static/css/box.css                | 21 ++++++++++++++-------
 static/js/form.js                 | 21 +++++++++++++++------
 templates/common/genericform.html |  6 +++++-
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/static/css/box.css b/static/css/box.css
index c4cb0d8e3..1e62bcabd 100644
--- a/static/css/box.css
+++ b/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;
diff --git a/static/js/form.js b/static/js/form.js
index 029f6472d..15c4af0c3 100644
--- a/static/js/form.js
+++ b/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"));
 });
diff --git a/templates/common/genericform.html b/templates/common/genericform.html
index d07b5af55..0d349f9ad 100644
--- a/templates/common/genericform.html
+++ b/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>