Using Tippy.js for directive tooltips.

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;