Index: /trunk/misc/dns-o-matic.py
===================================================================
--- /trunk/misc/dns-o-matic.py (revision 160)
+++ /trunk/misc/dns-o-matic.py (revision 161)
@@ -156,5 +156,5 @@
 			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,5 +205,7 @@
 	# 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,4 +277,24 @@
         $(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,5 +307,5 @@
       font-family:sans-serif;
       font-weight:normal;
-      font-size:0.75em;
+      font-size:0.8em;
       color:#666;
       padding:5px;
@@ -292,4 +314,19 @@
       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 {