Added tooltips to popup

popup.css

@@ -14,6 +14,7 @@ body {
 	padding: 0;
 	display: flex;
 	flex-flow: column;
+	font-family: Inconsolata, sans-serif;
 }
 
 /***********/
@@ -26,6 +27,7 @@ button {
 	background-color: #fff;
 	border: none;
 	cursor: pointer;
+	font-family: Font Awesome, Inconsolata, sans-serif;
 }
 button:active {
 	transform: scale(0.95);
@@ -55,7 +57,6 @@ button.main-button {
 	height: 150px;
 	width: 150px;
 	color: #ccc;
-	font-family: Font Awesome;
 }
 button.main-button.active {
 	color: #000;
@@ -109,15 +110,16 @@ button.main-button.whitelist.active::after {
 }
 
 .aux-button-container button {
-	font-size: 1.25rem;
-	padding: 0;
 	flex: 1 1 auto;
-	font-family: Font Awesome, Inconsolata, sans-serif;
+	padding: 0;
+	margin: 2px 10px;
+	min-width: 0;
+
 	display: flex;
 	flex-flow: column;
 	align-items: center;
 	justify-content: center;
-	min-width: 0;
+	font-size: 1.25rem;
 }
 .aux-button-container button::before {
 	padding: 4px 0 0 0;
@@ -166,7 +168,6 @@ button.help-button::after {
 	position: relative;
 	display: flex;
 	flex-flow: column;
-	font-family: Inconsolata, sans-serif;
 	font-size: 1rem;
 	padding: 10px 8px 6px 8px;
 	line-height: 1;
@@ -255,7 +256,6 @@ button.reload-button:hover {
 }
 button.reload-button::before {
 	content: "\F2F1";
-	font-family: Font Awesome;
 	font-size: 2rem;
 	font-weight: 900;
 }
@@ -266,10 +266,47 @@ button.reload-button::before {
 
 .info-header {
 	text-align: center;
-	font-family: Inconsolata, sans-serif;
 	font-size: 0.75rem;
 	padding: 2px;
 	background-color: #444;
 	color: #ccc;
 	cursor: default;
+}
+
+/************/
+/* TOOLTIPS */
+/************/
+
+.tooltip-overlay {
+	position: fixed;
+	width: calc(100% - 20px);
+	left: 10px;
+	top: 0;
+	height: 100%;
+	pointer-events: none;
+}
+
+.tooltip {
+	background-color: #ffe;
+	position: absolute;
+	left: 0;
+	right: 0;
+	margin: auto;
+	padding: 8px 12px;
+	border: 1px solid #777;
+	border-radius: 4px;
+	box-shadow:
+		1px 1px 4px 0 #aaa;
+	text-align: center;
+	line-height: 1.3;
+	font-size: 0.75rem;
+	width: fit-content;
+	visibility: hidden;
+	opacity: 0.0;
+	transition: none;
+}
+.tooltip.active {
+	visibility: visible;
+	opacity: 1.0;
+	transition: opacity 0.1s ease 0.5s;
 }

popup.html

@@ -9,16 +9,19 @@
 		AlwaysKillSticky <span class='version'>0.0</span>
 	</div>
 	<div class='main-button-container'>
-		<button type='button' class='main-button'></button>
+		<button type='button' class='main-button' data-tooltip='Click to toggle state' data-tooltip-position-y='140px'></button>
 	</div>
 	<div class='info'>
-		<span class='mode-display'>Mode: </span>
+		<span class='mode-display' data-tooltip-position-y='110px'>Mode: </span>
 		<span class='status-display'>Killing stickies? </span>
-		<button type='button' class='reload-button'></button>
+		<button type='button' class='reload-button' data-tooltip='Reload page' data-tooltip-position-y='135px'></button>
 	</div>
 	<div class='aux-button-container'>
-		<button type='button' class='help-button'></button>
-		<button type='button' class='options-button'></button>
+		<button type='button' class='help-button' data-tooltip='Help with using AlwaysKillSticky' data-tooltip-position-y='192px'></button>
+		<button type='button' class='options-button' data-tooltip='Mode selection and manual configuration' data-tooltip-position-y='192px'></button>
+	</div>
+	<div class='tooltip-overlay'>
+		<p class='tooltip'>Lorem ipsum.</p>
 	</div>
 </body>
 <script src="functions.js"></script>

popup.js

@@ -128,7 +128,7 @@ function recalculatePatternEffects() {
 }
 
 /*	Updates the values of properties of the AKS object on the basis of the 
-	provided result object. Called after a query to storage (to retrieve the
+	provided result object. Called after a document.querySelector to storage (to retrieve the
 	result object).
 
 	Updated properties are: the current mode, the matching and exclusion 
@@ -158,6 +158,8 @@ function updateUIState() {
 	let info = document.querySelector(".info");
 	// The “Killing stickies?” label.
 	let statusLabel = document.querySelector(".info .status-display");
+	// The “Mode:” label.
+	let modeLabel = document.querySelector(".info .mode-display");
 
 	var active, whitelist;
 
@@ -185,6 +187,22 @@ function updateUIState() {
 
 	mainButton.classList.toggle("whitelist", (AKS.mode == "whitelist"));
 	info.classList.toggle("whitelist", (AKS.mode == "whitelist"));
+
+	mainButton.dataset["tooltip"] = active ? 
+									"Click to stop killing stickies on this page" :
+									"Click to kill stickies on this page";
+	modeLabel.dataset["tooltip"] = (AKS.mode == "whitelist") ?
+								   "Stickies are killed *except* on sites you exclude" :
+								   "Stickies are killed *only* on specified sites";
+}
+
+/*	Updates the tooltip text and position, as specified by the given element
+	(in the element’s data-tooltip and data-tooltip-position-y attributes).
+	*/
+function updateTooltip(element) {
+	let tooltip = document.querySelector(".tooltip");
+	tooltip.innerHTML = element.dataset["tooltip"].replace(/\*(.+?)\*/, "<strong>$1</strong>");
+	tooltip.style.top = element.dataset["tooltipPositionY"];
 }
 
 /******************/
@@ -237,6 +255,9 @@ function initialize() {
 				reloadButton.classList.toggle("active", true);
 			}
 
+			// Update the tooltip for the main button.
+			updateTooltip(event.target);
+
 			// Update the page action (toolbar) icon.
 			updateIcon(shouldKillSticky, AKS.activeTabID);
 		});
@@ -257,6 +278,18 @@ function initialize() {
 		chrome.tabs.update(null, { url: AKS.activeTabLocation });
 		window.close();
 	});
+
+	// Listeners to show/hide tooltips.
+	document.querySelectorAll("button, .mode-display").forEach(element => {
+		let tooltip = document.querySelector(".tooltip");
+		element.addEventListener("mouseenter", (event) => {
+			tooltip.classList.toggle("active", true);
+			updateTooltip(event.target);
+		});
+		element.addEventListener("mouseleave", (event) => {
+			tooltip.classList.toggle("active", false);
+		});
+	});
 }
 
 initialize();