Changeset 161 for trunk/misc

Timestamp:

05/03/10 11:30:32 (5 months ago)

Author:

mbooth

Message:

Show error text in a fancy tooltip if javascript is enabled in the browser. (The built in Firefox tooltips don't stay visible for long enough to read them.)

Files:

• trunk/misc/dns-o-matic.py (modified) (5 diffs)

trunk/misc/dns-o-matic.py

@@ -156 +156 @@
             problem = {
                        'icon':'error',
-                       'text':'Dangling pointer (PTR) record detected for %s!\n\n' % data['lookup_of'] + \
+                       'text':'Dangling pointer (PTR) record detected for %s! \n\n' % data['lookup_of'] + \
                               'Perhaps it was left behind when the address (A) record for %s was deleted.' % data['resolves_to'],
                        }
@@ -205 +205 @@
     # display any problems associated with the record
     for prob in data['problems']:
-        print "      <img src='icons/%s.png' />" % prob['icon']
+        print "      <a rel='tooltip' title='%s'>" % prob['text']
+        print "        <img src='icons/%s.png' alt='%s' />" % (prob['icon'], prob['icon'])
+        print "      </a>"
     print "    </p>"
 
@@ -275 +277 @@
         $(subnet+"_off").css('display', 'none');
       });
+
+      /* mouseover tooltip event callbacks */
+      $('a[rel=tooltip]').mouseover(function(e) {
+        /* steal the title text to use in the tooltip */
+        var msg = $(this).attr('title').replace('\n','<br />');
+        $(this).attr('title','');
+        /* construct the tooltip */
+        $(this).append('<div id="tooltip"><div class="tooltipBody">' + msg + '</div></div>');
+        /* position and show the tooltip */
+        $("#tooltip").css('top', e.pageY + 10 );
+        $("#tooltip").css('left', e.pageX + 20 );
+      }).mousemove(function(e) {
+        /* make the tooltip follow the cursor */
+        $("#tooltip").css('top', e.pageY + 10 );
+        $("#tooltip").css('left', e.pageX + 20 );
+      }).mouseout(function() {
+        /* put the title text back and destroy the tooltip */
+        $(this).attr('title',$(".tooltipBody").html());
+        $(this).children("div#tooltip").remove();
+      });
     });
   </script>
@@ -285 +307 @@
       font-family:sans-serif;
       font-weight:normal;
-      font-size:0.75em;
+      font-size:0.8em;
       color:#666;
       padding:5px;
@@ -292 +314 @@
       margin:0;
       padding:0;
+    }
+    img {
+      height:0.8em;
+      border:0;
+    }
+    #tooltip {
+        position:absolute;
+        z-index:9999;
+        color:#fff;
+        font-size:10px;
+        width:275px;
+    }
+    #tooltip .tooltipBody {
+      background-color:#000;
+      padding:5px
     }
     .record {