Using Tippy.js for directive tooltips.

assets/components/alerts/add.vue

@@ -148,12 +148,14 @@
 					/>Notify me in traxxx
 				</label>
 
+				<!--
 				<label class="alert-label">
 					<Checkbox
 						:checked="email"
 						@change="checked => email = checked"
 					/>Send me an e-mail
 				</label>
+				-->
 
 				<div class="stashes-container">
 					<ul class="stashes nolist">

assets/components/header/notifications.vue

@@ -91,6 +91,13 @@
 							</div>
 						</div>
 
+						<Icon
+							v-if="notification.alert"
+							v-tooltip="`You set an alert for <strong>${notification.alert.tags.map(tag => tag.name).join(', ') || 'all'}</strong> scenes with <strong>${notification.alert.actors.map(actor => actor.name).join(', ') || 'any actor'}</strong> for <strong>${notification.alert.entity?.name || 'any channel'}</strong>`"
+							icon="question5"
+							@click.prevent
+						/>
+
 						<Icon
 							v-if="!notification.seen"
 							v-tooltip="'Mark as seen'"
@@ -193,9 +200,18 @@ export default {
 		border-right: solid .5rem var(--primary);
 	}
 
+	.icon {
+		padding: 1rem;
+		fill: var(--shadow-weak);
+
+		&:hover {
+			fill: var(--primary);
+		}
+	}
+
 	&:not(:last-child) {
 		.notification-body,
-		.notification-check {
+		.icon {
 			border-bottom: solid 1px var(--shadow-hint);
 		}
 	}
@@ -263,15 +279,6 @@ export default {
 	font-weight: bold;
 }
 
-.notification-check {
-	padding: 1rem;
-	fill: var(--shadow-weak);
-
-	&:hover {
-		fill: var(--primary);
-	}
-}
-
 .poster {
 	width: 5rem;
 	height: 3rem;

assets/js/main.js

@@ -2,6 +2,7 @@ import config from 'config';
 import { createApp } from 'vue';
 import dayjs from 'dayjs';
 import mitt from 'mitt';
+import tippy from 'tippy.js';
 
 import router from './router';
 import initStore from './store';
@@ -11,6 +12,7 @@ import initAuthObservers from './auth/observers';
 import { formatDate, formatDuration } from './format';
 
 import '../css/style.scss';
+import 'tippy.js/dist/tippy.css';
 
 import Container from '../components/container/container.vue';
 import Icon from '../components/icon/icon.vue';
@@ -123,8 +125,17 @@ async function init() {
 
 	app.directive('tooltip', {
 		beforeMount(el, binding) {
-			// console.log(binding.modifiers);
-			el.title = binding.value; // eslint-disable-line no-param-reassign
+			// don't include HTML in native title attribute
+			const textEl = document.createElement('div');
+			textEl.innerHTML = binding.value;
+
+			el.title = textEl.textContent; // eslint-disable-line no-param-reassign
+
+			tippy(el, {
+				content: binding.value,
+				allowHTML: true,
+				duration: [0, 0],
+			});
 		},
 	});
 

assets/js/ui/actions.js

@@ -66,6 +66,14 @@ function initUiActions(store, _router) {
 								slug
 							}
 						}
+						entity: alertsEntityByAlertId {
+							entity {
+								id
+								name
+								slug
+								independent
+							}
+						}
 					}
                 }
             }

package-lock.json

@@ -68,6 +68,7 @@
                 "showdown": "^1.9.1",
                 "source-map-support": "^0.5.16",
                 "template-format": "^1.2.5",
+                "tippy.js": "^6.3.1",
                 "tough-cookie": "^3.0.1",
                 "tty-table": "^2.8.12",
                 "tunnel": "0.0.6",
@@ -1398,6 +1399,15 @@
                 "upath": "^1.1.1"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.9.2",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+            "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@tokenizer/token": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.1.1.tgz",
@@ -13748,6 +13758,14 @@
                 "node": ">=8"
             }
         },
+        "node_modules/tippy.js": {
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.1.tgz",
+            "integrity": "sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==",
+            "dependencies": {
+                "@popperjs/core": "^2.8.3"
+            }
+        },
         "node_modules/tmp": {
             "version": "0.0.33",
             "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -16755,6 +16773,11 @@
                 "upath": "^1.1.1"
             }
         },
+        "@popperjs/core": {
+            "version": "2.9.2",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+            "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
+        },
         "@tokenizer/token": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.1.1.tgz",
@@ -26804,6 +26827,14 @@
             "resolved": "https://registry.npmjs.org/tildify/-/tildify-2.0.0.tgz",
             "integrity": "sha512-Cc+OraorugtXNfs50hU9KS369rFXCfgGLpfCfvlc+Ud5u6VWmUQsOAa9HbTvheQdYnrdJqqv1e5oIqXppMYnSw=="
         },
+        "tippy.js": {
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.1.tgz",
+            "integrity": "sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==",
+            "requires": {
+                "@popperjs/core": "^2.8.3"
+            }
+        },
         "tmp": {
             "version": "0.0.33",
             "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",

package.json

@@ -129,6 +129,7 @@
         "showdown": "^1.9.1",
         "source-map-support": "^0.5.16",
         "template-format": "^1.2.5",
+        "tippy.js": "^6.3.1",
         "tough-cookie": "^3.0.1",
         "tty-table": "^2.8.12",
         "tunnel": "0.0.6",

webpack.config.js

@@ -39,7 +39,7 @@ module.exports = {
 				],
 			},
 			{
-				test: /\.scss$/,
+				test: /\.s?css$/,
 				use: [
 					MiniCssExtractPlugin.loader,
 					{