diff --git a/code/boot.js b/code/boot.js
index 3f90fb63..2e91471d 100644
--- a/code/boot.js
+++ b/code/boot.js
@@ -161,7 +161,7 @@ window.setupPlayerStat = function() {
         + '\n\nNote: your player stats can only be updated by a full reload (F5)';
 
   $('#playerstat').html(''
-    + '<h2 title="'+t+'">'+level+'&nbsp;'
+    + '<h2 title="'+t+'" data-tooltip="title_render">'+level+'&nbsp;'
     + '<span class="'+cls+'">'+PLAYER.nickname+'</span>'
     + '<div>'
     + '<sup>XM: '+xmRatio+'%</sup>'
@@ -189,6 +189,56 @@ window.setupSidebarToggle = function() {
   });
 }
 
+window.setupTooltips = function() {
+  $(document).tooltip({
+    // enable mouse tracking
+    track: true,
+    // disable show/hide animation
+    show: false,
+    hide: false,
+    items: "[data-tooltip]",
+    content: function(){
+      var type = $(this).attr('data-tooltip');
+      if(type == 'title'){
+        return $(this).attr('title');
+      }
+      else if(type == 'title_render'){
+        var title = $(this).attr('title');
+        var data = [];
+        var max_columns = 0;
+
+        // parse data
+        var rows = title.split('\n');
+        $.each(rows, function(i, row){
+          data[i] = row.replace(/\t+/g, '\t').split('\t');
+          if(data[i].length > max_columns) max_columns = data[i].length;
+        });
+
+        // build table
+        if(max_columns > 1) {
+          var tooltip = '<table>';
+          $.each(data, function(i, row){
+            tooltip += '<tr>';
+            $.each(data[i], function(k, cell){
+              var attributes = '';
+              if(k == 0 && data[i].length < max_columns){
+                attributes = ' colspan="'+(max_columns - data[i].length + 1)+'"';
+              }
+              tooltip += '<td'+attributes+'>'+cell+'</td>';
+            });
+            tooltip += '</tr>';
+          });
+          tooltip += '</table>';
+          return tooltip;
+        }
+        else {
+          return title.replace(/\n/g, '<br />');
+        }
+      }
+    }
+  });
+}
+
 
 // BOOTING ///////////////////////////////////////////////////////////
 
@@ -204,6 +254,7 @@ function boot() {
   window.setupSidebarToggle();
   window.updateGameScore();
   window.setupPlayerStat();
+  window.setupTooltips();
   window.chat.setup();
   // read here ONCE, so the URL is only evaluated one time after the
   // necessary data has been loaded.
@@ -232,10 +283,11 @@ function asyncLoadScript(a){return function(b,c){var d=document.createElement("s
 // contains the default Ingress map style.
 var LLGMAPS = 'http://breunigs.github.com/ingress-intel-total-conversion/dist/leaflet_google.js';
 var JQUERY = 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js';
+var JQUERYUI = 'http://code.jquery.com/ui/1.10.0/jquery-ui.js';
 var LEAFLET = 'http://cdn.leafletjs.com/leaflet-0.5/leaflet.js';
 var AUTOLINK = 'http://breunigs.github.com/ingress-intel-total-conversion/dist/autolink.js';
 
 // after all scripts have loaded, boot the actual app
-load(JQUERY, LEAFLET, AUTOLINK).then(LLGMAPS).onError(function (err) {
+load(JQUERY, LEAFLET, AUTOLINK).then(LLGMAPS, JQUERYUI).onError(function (err) {
   alert('Could not all resources, the script likely won’t work.\n\nIf this happend the first time for you, it’s probably a temporary issue. Just wait a bit and try again.\n\nIf you installed the script for the first time and this happens:\n– try disabling NoScript if you have it installed\n– press CTRL+SHIFT+K in Firefox or CTRL+SHIFT+I in Chrome/Opera and reload the page. Additional info may be available in the console.\n– Open an issue at https://github.com/breunigs/ingress-intel-total-conversion/issues');
 }).thenRun(boot);
diff --git a/code/chat.js b/code/chat.js
index 7b091552..61bd1ffd 100644
--- a/code/chat.js
+++ b/code/chat.js
@@ -336,7 +336,7 @@ window.chat.handlePublicAutomated = function(data) {
         case 'PORTAL':
           var latlng = [part[1].latE6/1E6, part[1].lngE6/1E6];
           var js = 'window.zoomToAndShowPortal(\''+part[1].guid+'\', ['+latlng[0]+', '+latlng[1]+'])';
-          tmpmsg += '<a onclick="'+js+'" title="'+part[1].address+'" class="help">'+part[1].name+'</a>';
+          tmpmsg += '<a onclick="'+js+'" title="'+part[1].address+'" class="help" data-tooltip="title">'+part[1].name+'</a>';
           break;
       }
     });
@@ -453,9 +453,9 @@ window.chat.renderMsg = function(msg, nick, time, team) {
   var ta = unixTimeToHHmm(time);
   var tb = unixTimeToString(time, true);
   // help cursor via “#chat time”
-  var t = '<time title="'+tb+'" data-timestamp="'+time+'">'+ta+'</time>';
+  var t = '<time title="'+tb+'" data-timestamp="'+time+'" data-tooltip="title">'+ta+'</time>';
   var s = 'style="color:'+COLORS[team]+'"';
-  var title = nick.length >= 8 ? 'title="'+nick+'" class="help"' : '';
+  var title = nick.length >= 8 ? 'title="'+nick+'" class="help" data-tooltip="title"' : '';
   return '<p>'+t+'<span class="invisibleseparator"> &lt;</span><mark '+s+'>'+nick+'</mark><span class="invisibleseparator">&gt; </span><span>'+msg+'</span></p>';
 }
 
diff --git a/code/debugging.js b/code/debugging.js
index b3f12ecc..7156ddda 100644
--- a/code/debugging.js
+++ b/code/debugging.js
@@ -72,7 +72,7 @@ window.debug.console.renderLine = function(text, errorType) {
   var d = new Date();
   var ta = d.toLocaleTimeString(); // print line instead maybe?
   var tb = d.toLocaleString();
-  var t = '<time title="'+tb+'" data-timestamp="'+d.getTime()+'">'+ta+'</time>';
+  var t = '<time title="'+tb+'" data-timestamp="'+d.getTime()+'" data-tooltip="title">'+ta+'</time>';
   var s = 'style="color:'+color+'"';
   var l = '<p>'+t+'<mark '+s+'>'+errorType+'</mark><span>'+text+'</span></p>';
   $('#debugconsole').prepend(l);
diff --git a/code/portal_detail_display.js b/code/portal_detail_display.js
index 98b33592..cec6b052 100644
--- a/code/portal_detail_display.js
+++ b/code/portal_detail_display.js
@@ -18,7 +18,7 @@ window.renderPortalDetails = function(guid) {
   if(d.portalV2.linkedEdges) $.each(d.portalV2.linkedEdges, function(ind, link) {
     links[link.isOrigin ? 'outgoing' : 'incoming']++;
   });
-  function linkExpl(t) { return '<tt title="↳ incoming links\n↴ outgoing links\n• is meant to be the portal.">'+t+'</tt>'; }
+  function linkExpl(t) { return '<tt title="↳ incoming links\n↴ outgoing links\n• is meant to be the portal." data-tooltip="title_render">'+t+'</tt>'; }
   var linksText = [linkExpl('links'), linkExpl(' ↳ ' + links.incoming+'&nbsp;&nbsp;•&nbsp;&nbsp;'+links.outgoing+' ↴')];
 
   var player = d.captured && d.captured.capturingPlayerId
@@ -62,7 +62,7 @@ window.renderPortalDetails = function(guid) {
       .html(''
         + '<h3>'+d.portalV2.descriptiveText.TITLE+'</h3>'
         // help cursor via “.imgpreview img”
-        + '<div class="imgpreview"><img src="'+img+'" title="'+getPortalDescriptionFromDetails(d)+'\n\nClick to show full image."/></div>'
+        + '<div class="imgpreview"><img src="'+img+'" title="'+getPortalDescriptionFromDetails(d)+'\n\nClick to show full image." data-tooltip="title_render"/></div>'
         + '<span id="level">'+Math.floor(getPortalLevel(d))+'</span>'
         + '<div class="mods">'+getModDetails(d)+'</div>'
         + '<div id="randdetails">'+randDetails+'</div>'
diff --git a/code/portal_detail_display_tools.js b/code/portal_detail_display_tools.js
index 6bcbe96e..71d7c333 100644
--- a/code/portal_detail_display_tools.js
+++ b/code/portal_detail_display_tools.js
@@ -56,10 +56,10 @@ window.getModDetails = function(d) {
     }
   });
 
-  var t = '<span title="'+modsTitle[0]+'" style="color:'+modsColor[0]+'">'+mods[0]+'</span>'
-        + '<span title="'+modsTitle[1]+'" style="color:'+modsColor[1]+'">'+mods[1]+'</span>'
-        + '<span title="'+modsTitle[2]+'" style="color:'+modsColor[2]+'">'+mods[2]+'</span>'
-        + '<span title="'+modsTitle[3]+'" style="color:'+modsColor[3]+'">'+mods[3]+'</span>'
+  var t = '<span'+(modsTitle[0].length ? 'title="'+modsTitle[0]+'" data-tooltip="title_render"' : '')+' style="color:'+modsColor[0]+'">'+mods[0]+'</span>'
+        + '<span'+(modsTitle[1].length ? 'title="'+modsTitle[1]+'" data-tooltip="title_render"' : '')+' style="color:'+modsColor[1]+'">'+mods[1]+'</span>'
+        + '<span'+(modsTitle[2].length ? 'title="'+modsTitle[2]+'" data-tooltip="title_render"' : '')+' style="color:'+modsColor[2]+'">'+mods[2]+'</span>'
+        + '<span'+(modsTitle[3].length ? 'title="'+modsTitle[3]+'" data-tooltip="title_render"' : '')+' style="color:'+modsColor[3]+'">'+mods[3]+'</span>'
 
   return t;
 }
@@ -69,7 +69,7 @@ window.getEnergyText = function(d) {
   var totalNrg = getTotalPortalEnergy(d);
   var inf = currentNrg + ' / ' + totalNrg;
   var fill = prettyEnergy(currentNrg) + ' / ' + prettyEnergy(totalNrg)
-  return ['energy', '<tt title="'+inf+'">' + fill + '</tt>'];
+  return ['energy', '<tt title="'+inf+'" data-tooltip="title_render">' + fill + '</tt>'];
 }
 
 window.getAvgResoDistText = function(d) {
@@ -112,7 +112,7 @@ window.getResonatorDetails = function(d) {
 // rotates clockwise. So, last one is 7 (southeast).
 window.renderResonatorDetails = function(slot, level, nrg, dist, nick, isLeft) {
   if(level === 0) {
-    var meter = '<span class="meter" title="octant:\t' + OCTANTS[slot] + '"></span>';
+    var meter = '<span class="meter" title="octant:\t' + OCTANTS[slot] + '" data-tooltip="title_render"></span>';
   } else {
     var max = RESO_NRG[level];
     var fillGrade = nrg/max*100;
@@ -131,7 +131,7 @@ window.renderResonatorDetails = function(slot, level, nrg, dist, nick, isLeft) {
 
     var fill  = '<span style="'+style+'"></span>';
 
-    var meter = '<span class="meter meter-rel" title="'+inf+'">' + fill + lbar + '</span>';
+    var meter = '<span class="meter meter-rel" title="'+inf+'" data-tooltip="title_render">' + fill + lbar + '</span>';
   }
   var cls = isLeft ? 'left' : 'right';
   var text = '<span class="meter-text '+cls+'">'+(nick||'')+'</span>';
@@ -162,7 +162,7 @@ window.getDestroyAP = function(d) {
     t += linkCount  + '×\tLinks\t\t= ' + digits(linkAp) + '\n';
     t += fieldCount + '×\tFields\t\t= ' + digits(fieldAp) + '\n';
     t += 'Sum: ' + digits(sum) + ' AP';
-    return '<tt title="'+t+'">' + digits(text) + '</tt>';
+    return '<tt title="'+t+'" data-tooltip="title_render">' + digits(text) + '</tt>';
   }
 
   return [tt('AP Gain'), tt(sum)];
diff --git a/code/request_handling.js b/code/request_handling.js
index 042fc397..e28f4c7e 100644
--- a/code/request_handling.js
+++ b/code/request_handling.js
@@ -47,7 +47,7 @@ window.renderUpdateStatus = function() {
     t += 'Up to date.';
 
   if(renderLimitReached())
-    t += ' <span style="color:red" class="help" title="Can only render so much before it gets unbearably slow. Not all entities are shown. Zoom in or increase the limit (search for MAX_DRAWN_*).">RENDER LIMIT</span> '
+    t += ' <span style="color:red" class="help" title="Can only render so much before it gets unbearably slow. Not all entities are shown. Zoom in or increase the limit (search for MAX_DRAWN_*)." data-tooltip="title_render">RENDER LIMIT</span> '
 
   if(window.failedRequestCount > 0)
     t += ' <span style="color:red">' + window.failedRequestCount + ' failed</span>.'
diff --git a/main.js b/main.js
index 64a0967d..2d63987d 100644
--- a/main.js
+++ b/main.js
@@ -57,7 +57,8 @@ document.getElementsByTagName('head')[0].innerHTML = ''
   + '<title>Ingress Intel Map</title>'
   + '<link rel="stylesheet" type="text/css" href="http://breunigs.github.com/ingress-intel-total-conversion/style.css?@@BUILDDATE@@"/>'
   + '<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css"/>'
-  + '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Coda"/>';
+  + '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Coda"/>'
+  + '<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css"/>';
 
 document.getElementsByTagName('body')[0].innerHTML = ''
   + '<div id="map">Loading, please wait</div>'