From 0cdc2a0a04ca0645c1a25f6e7d898c1306f42a20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Sat, 5 Aug 2017 15:28:05 -0400
Subject: [PATCH] Replace status message abbr with a tooltipped icon

---
 client/css/style.css | 20 ++++++++++++++++++++
 client/index.html    |  7 +++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 2c3a12ff..acb6d0cb 100644
--- a/client/css/style.css
+++ b/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 {
diff --git a/client/index.html b/client/index.html
index 2e8eae1b..87423d94 100644
--- a/client/index.html
+++ b/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">