Replace status message abbr with a tooltipped icon

client/css/style.css

@@ -194,6 +194,7 @@ kbd {
 #chat .title:before,
 #footer .icon,
 #chat .count:before,
+#settings .extra-help,
 #settings #play:before,
 #form #submit:before,
 #chat .invite .from:before,
@@ -334,6 +335,10 @@ kbd {
 	line-height: 50px;
 }
 
+#settings .extra-help:before {
+	content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */
+}
+
 #settings #play:before {
 	content: "\f028"; /* http://fontawesome.io/icon/volume-up/ */
 	margin-right: 9px;
@@ -1400,10 +1405,15 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	margin: 4px 10px 0 0;
 }
 
+#settings .extra-help,
 #settings #play {
 	color: #7f8c8d;
 }
 
+#settings .extra-help {
+	cursor: help;
+}
+
 #settings #play {
 	font-size: 14px;
 	transition: opacity .2s;
@@ -1725,6 +1735,16 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	animation-delay: .4s;
 }
 
+.tooltipped-no-delay:hover:before,
+.tooltipped-no-delay:hover:after,
+.tooltipped-no-delay:active:before,
+.tooltipped-no-delay:active:after,
+.tooltipped-no-delay:focus:before,
+.tooltipped-no-delay:focus:after {
+	-webkit-animation-delay: 0s;
+	animation-delay: 0s;
+}
+
 .tooltipped-s:after,
 .tooltipped-se:after,
 .tooltipped-sw:after {

client/index.html

@@ -219,13 +219,16 @@
 							<div class="col-sm-6">
 								<label class="opt">
 									<input type="checkbox" name="optional">
-									Show <abbr title="Joins, parts, kicks, nick changes, and mode changes">status messages</abbr>
+									Show status messages
+									<span class="tooltipped tooltipped-n tooltipped-no-delay" aria-label="Joins, parts, kicks, nick changes, and mode changes">
+										<button class="extra-help" aria-label="Joins, parts, kicks, nick changes, and mode changes"></button>
+									</span>
 								</label>
 							</div>
 							<div class="col-sm-6">
 								<label class="opt">
 									<input type="checkbox" name="condense">
-									Condense <abbr title="Joins, parts, kicks, nick changes, and mode changes">status messages</abbr>
+									Condense status messages
 								</label>
 							</div>
 							<div class="col-sm-6">