diff --git a/web/templates/weaponstats.ejs b/web/templates/weaponstats.ejs
index 84d3dec..cbaf4e6 100644
--- a/web/templates/weaponstats.ejs
+++ b/web/templates/weaponstats.ejs
@@ -14,7 +14,7 @@
 </td>
 <td><%= Array(num_slots + 1).join("\u26aa") %></td>
 <td>
-<div class="sharpness-bar">
+<div class="sharpness-bar" title="<%= sharpness_title %>">
 <span style="width:<%= sharpness[0] %>px" class="red"></span>
 <span style="width:<%= sharpness[1] %>px" class="orange"></span>
 <span style="width:<%= sharpness[2] %>px" class="yellow"></span>
@@ -23,7 +23,7 @@
 <span style="width:<%= sharpness[5] %>px" class="white"></span>
 <span style="width:<%= sharpness[6] %>px" class="purple"></span>
 </div>
-<div class="sharpness-bar">
+<div class="sharpness-bar" title="<%= sharpness_plus_title %>">
 <span style="width:<%= sharpness_plus[0] %>px" class="red"></span>
 <span style="width:<%= sharpness_plus[1] %>px" class="orange"></span>
 <span style="width:<%= sharpness_plus[2] %>px" class="yellow"></span>
diff --git a/web/weaponplanner.html b/web/weaponplanner.html
index 81565db..d7ceb49 100644
--- a/web/weaponplanner.html
+++ b/web/weaponplanner.html
@@ -40,47 +40,47 @@
       }
 
       .sharpness-bar {
-            border: 1px #d3d3d3 solid;
-         min-width: 92px;
-                         height: 10px;
-            background-color: #d3d3d3;
-            float: left;
-            clear: both;
-        }
+          border: 1px #d3d3d3 solid;
+          min-width: 92px;
+          height: 10px;
+          background-color: #d3d3d3;
+          float: left;
+          clear: both;
+      }
 
-        .sharpness-bar span {
-            display: inline-block;
-            height: 100%;
-            float: left;
-        }
+      .sharpness-bar span {
+          display: inline-block;
+          height: 100%;
+          float: left;
+      }
 
-        .sharpness-bar .red {
-            background-color: #C00C38 !important;
-        }
+      .sharpness-bar .red {
+          background-color: #C00C38 !important;
+      }
 
-        .sharpness-bar .orange {
-            background-color: #E85018 !important;
-        }
+      .sharpness-bar .orange {
+          background-color: #E85018 !important;
+      }
 
-        .sharpness-bar .yellow {
-            background-color: #F0C830 !important;
-        }
+      .sharpness-bar .yellow {
+          background-color: #F0C830 !important;
+      }
 
-        .sharpness-bar .green {
-            background-color: #58D000 !important;
-        }
+      .sharpness-bar .green {
+          background-color: #58D000 !important;
+      }
 
-        .sharpness-bar .blue {
-            background-color: #3068E8 !important;
-        }
+      .sharpness-bar .blue {
+          background-color: #3068E8 !important;
+      }
 
-        .sharpness-bar .white {
-            background-color: #F0F0F0 !important;
-        }
+      .sharpness-bar .white {
+          background-color: #F0F0F0 !important;
+      }
 
-        .sharpness-bar .purple {
-            background-color: #c3c !important;
-        }
+      .sharpness-bar .purple {
+          background-color: #c3c !important;
+      }
 
   </style>
 
@@ -159,6 +159,8 @@
         $("#weapon_stats").html("");
         $.getJSON(DATA_PATH + "weapon/" + weapon_id + ".json",
                   function(data) {
+                      data["sharpness_title"] = data["sharpness"].join(",");
+                      data["sharpness_plus_title"] = data["sharpness_plus"].join(",");
                       var html = template_stats.render(data);
                       $("#weapon_stats").html(html);
                   });