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
+							}
+						}
 					}
                 }
             }