css/style.css

@@ -52,3 +52,17 @@
 a.alleged {
 	color: #FE9F30;
 }
+
+
+span.flags {
+    display:inline-block;
+    margin: 0 10px 5px 0;
+}
+span.flags img {
+    position:relative;
+    top:2px;
+}
+
+.tooltip * {
+    text-align:left;
+}

js/main.js

@@ -12,7 +12,6 @@ require.config({
     datatablest: 'libs/datatables/dataTables.TorStatus',
     tooltip: 'libs/bootstrap/bootstrap-tooltip',
     typeahead: 'libs/bootstrap/bootstrap-typeahead',
-    popover: 'libs/bootstrap/bootstrap-popover',
     collapse: 'libs/bootstrap/bootstrap-collapse',
     d3js: 'libs/d3js/d3.v3.min',
     jssha: 'libs/jssha/sha1',

js/models/relay.js

@@ -14,41 +14,46 @@ define([
             var model = this;
             _.each(flags, function(flag) {
                 if (flag == "Authority") {
-                    output.push([flag,"award_stroke_"+size[2]]);
+                    output.push([flag,"award_stroke_"+size[2], "This relay is a directory authority."]);
                 }
                 if (flag == "BadExit") {
                     model.set({badexit: true});
-                    output.push([flag, "denied_"+size[0]]);
+                    output.push([flag, "denied_"+size[0], "This relay is believed to be useless as an exit node (because its ISP censors it, because it is behind a restrictive proxy, or for some similar reason)."]);
                 }
                 if (flag == "Fast") {
-                    output.push([flag,"bolt_"+size[0]]);
+                    output.push([flag,"bolt_"+size[0], "This relay is suitable for high-bandwidth circuits."]);
                 }
                 if (flag == "Guard") {
-                    output.push([flag,"share_"+size[0]]);
+                    output.push([flag,"share_"+size[0], "This relay is suitable for use as an entry guard."]);
                 }
                 if (flag == "HSDir") {
-                    output.push([flag,"book_alt_"+size[0]]);
+                    output.push([flag,"book_alt_"+size[0], "This relay is considered a v2 hidden service directory."]);
                 }
                 if (flag == "Named") {
-                    output.push([flag,"info_"+size[2]]);
+                    output.push([flag,"info_"+size[2], "This relay's identity-nickname mapping is canonical, and this authority binds names."]);
                 }
+                /* added for future use, but we need an icon...
+                if (flag == "NoEdConsensus") {
+                    output.push([flag,"xxx_"+size[2], "An Ed25519 key in the relay's descriptor or microdesriptor does not reflect authority consensus."]);
+                }
+                */
                 if (flag == "Running") {
-                    output.push([flag,"fork_"+size[1]]);
+                    output.push([flag,"fork_"+size[1], "This relay is currently usable."]);
                 }
                 if (flag == "Stable") {
-                    output.push([flag,"cd_"+size[0]]);
+                    output.push([flag,"cd_"+size[0], "This relay is suitable for long-lived circuits."]);
                 }
                 if (flag == "V2Dir") {
-                    output.push([flag,"book_"+size[1]]);
+                    output.push([flag,"book_"+size[1], "This relay implements the v2 directory protocol or higher."]);
                 }
                 if (flag == "Valid") {
-                    output.push([flag,"check_alt_"+size[0]]);
+                    output.push([flag,"check_alt_"+size[0], "This relay has been 'validated'."]);
                 }
                 if (flag == "Unnamed") {
-                    output.push([flag,"question_mark_"+size[2]]);
+                    output.push([flag,"question_mark_"+size[2], "Another relay has bound the name used by this relay, and this authority binds names."]);
                 }
                 if (flag == "Exit") {
-                    output.push([flag,"cloud_download_"+size[0]]);
+                    output.push([flag,"cloud_download_"+size[0], "This relay is more useful for building general-purpose exit circuits than for relay circuits."]);
                 }
             });
             return output;

js/views/about/main.js

@@ -5,7 +5,6 @@ define([
   'underscore',
   'backbone',
   'text!templates/about.html',
-  'popover',
   'collapse',
   'tooltip'
 ], function($, _, Backbone, aboutTemplate){
@@ -20,7 +19,7 @@ define([
             this.el.html(compiledTemplate);
             //$("#loading").hide();
             //$(".flag .tooltip").hide();
-            //$(".tip").popover();
+            //$(".tip").tooltip();
             $(".flag").hover(function(){
                 $(this).children(".tooltip").show();
 

js/views/details/main.js

@@ -10,7 +10,6 @@ define([
   'text!templates/details/bridge.html',
   'text!templates/details/error.html',
   'tooltip',
-  'popover',
   'd3js',
   'collapse',
   'helpers'
@@ -241,8 +240,9 @@ define([
             }
 
             $("#loading").hide();
+            $(".flags").tooltip();
             $(".flag .tooltip").hide();
-            $(".tip").popover();
+            $(".tip").tooltip();
             $(".flag").hover(function(){
                 $(this).children(".tooltip").show();
 

js/views/search/do.js

@@ -157,12 +157,14 @@ define([
 				// Save the state of the tables
                 "sDom": "<'row'<'span6'l><'span6 hide'f>r>t<'row'<'span6'i><'span6'p>>",
 				"bStateSave": false,
-				"aaSorting": []
+				"aaSorting": [],
+                "fnDrawCallback": function( oSettings ) {
+                    // Make the tooltips
+                    $(".flags").tooltip();
+                    $(".country").tooltip();
+                    $(".uptime").tooltip();
+                }
 			});
-            // Make the tooltips
-            $(".flags").tooltip();
-            $(".country").tooltip();
-            $(".uptime").tooltip();
             // Type ahead for country codes
             $('.typeahead').typeahead({source:_.values(CountryCodes)});
             $('input#flags').typeahead({

templates/details/bridge.html

@@ -14,14 +14,14 @@ <h2>General <small>Overall information on the Tor bridge</small></h2>
     <div class="span4">
     <h3>Configuration</h3>
     <dl>
-      <dt><span class="tip" data-content="This is the nickname that the Tor bridge operator chose." data-original-title="Nickname">Nickname</span></dt>
+      <dt><span class="tip" title="This is the nickname that the Tor bridge operator chose." data-original-title="Nickname">Nickname</span></dt>
       <dd><%= _.escape(relay.get('nickname')) %></dd>
 
-      <dt><span class="tip" data-content="Ports (addresses are hidden) where the bridge listens for incoming connections from clients and other relays." data-original-title="Onion-routing addresses">OR Addresses</span></dt>
+      <dt><span class="tip" title="Ports (addresses are hidden) where the bridge listens for incoming connections from clients and other relays." data-original-title="Onion-routing addresses">OR Addresses</span></dt>
       <dd><%= relay.get('or_addresses') %></dd>
 
       <dt>
-      <span class="tip" data-content="Bandwidth that the bridge is willing and able to provide in bytes per second." data-original-title="Advertised bandwidth">Advertised Bandwidth</span>
+      <span class="tip" title="Bandwidth that the bridge is willing and able to provide in bytes per second." data-original-title="Advertised bandwidth">Advertised Bandwidth</span>
       </dt>
       <dd><%= relay.get('bandwidth_hr') %></dd>
     </dl>
@@ -35,27 +35,29 @@ <h3>Properties</h3>
     <% } else { %>
     <h3>Last Known Properties</h3>
     <dl>
-    <dt><span class="tip" data-content="Timestamp when the bridge was last seen in the consensus." data-original-title="Last seen">Last Seen</span></dt>
+    <dt><span class="tip" title="Timestamp when the bridge was last seen in the consensus." data-original-title="Last seen">Last Seen</span></dt>
     <dd><%= relay.get('last_seen') %></dd>
     <% } %>
 
-    <dt><span class="tip" data-content="Hash of 20-byte unique identifier of the bridge." data-original-title="Hashed Fingerprint">Hashed Fingerprint</span></dt>
+    <dt><span class="tip" title="Hash of 20-byte unique identifier of the bridge." data-original-title="Hashed Fingerprint">Hashed Fingerprint</span></dt>
     <dd><tt><%= relay.get('fingerprint').replace(/(.{20})/g,"$1&#8203;") %></tt></dd>
 
-    <dt><span class="tip" data-content="Flags that the directory authorities assigned to this bridge." data-original-title="Bridge flags">Flags</span></dt>
+    <dt><span class="tip" title="Flags that the directory authorities assigned to this bridge." data-original-title="Bridge flags">Flags</span></dt>
     <dd><% _.each(relay.get('flags'), function(flag) { %>
-        <img class="inline" alt="" src="img/flags/<%= flag[1] %>.png">
+    <span class="flags" title="<%= flag[0] %><br /><%= flag[2] %>">
+        <img class="inline" alt="" src="img/flags/<%= flag[1] %>.png"/>
         <span class="inline"><%= flag[0] %></span>
+    </span>
     <% }); %>
     </dd>
 
-    <dt><span class="tip" data-content="Date and time when the bridge was last (re-)started." data-original-title="Last restarted">Last Restarted</span></dt>
+    <dt><span class="tip" title="Date and time when the bridge was last (re-)started." data-original-title="Last restarted">Last Restarted</span></dt>
     <dd><%= relay.get('last_restarted') %></dd>
 
-    <dt><span class="tip" data-content="What OS and Tor version the bridge is using" data-original-title="Platform">Platform</span></dt>
+    <dt><span class="tip" title="What OS and Tor version the bridge is using" data-original-title="Platform">Platform</span></dt>
     <dd><%= _.escape(relay.get('platform')) %></dd>
 
-    <dt><span class="tip" data-content="Transport protocols supported by this bridge." data-original-title="Transport protocols">Transport protocols</span></dt>
+    <dt><span class="tip" title="Transport protocols supported by this bridge." data-original-title="Transport protocols">Transport protocols</span></dt>
     <dd><%= relay.get('transports') %></dd>
 
     </dl>
@@ -65,14 +67,14 @@ <h3>Current Status</h3>
     <dl>
 
     <% if (relay.get('running') === false) { %>
-    <dt><span class="tip" data-content="The time since this bridge  was last seen online." data-original-title="Downtime">Downtime</span></dt>
+    <dt><span class="tip" title="The time since this bridge  was last seen online." data-original-title="Downtime">Downtime</span></dt>
     <dd><%= relay.get('downtime') %></dd>
     <% } else {%>
-    <dt><span class="tip" data-content="The time since this bridge is online." data-original-title="Uptime">Uptime</span></dt>
+    <dt><span class="tip" title="The time since this bridge is online." data-original-title="Uptime">Uptime</span></dt>
     <dd><%= relay.get('uptime_hrfull') %></dd>
     <% } %>
 
-    <dt><span class="tip" data-content="Whether this bridge is listed in the current Tor directory or not." data-original-title="Running">Running</span></dt>
+    <dt><span class="tip" title="Whether this bridge is listed in the current Tor directory or not." data-original-title="Running">Running</span></dt>
     <dd><%= relay.get('running') %></dd>
 
     </dl>