PG-4653 CustomAlert tooltips

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Changelog
 
+* 5.2.2 - 2026-01-08 - Added tooltips in add/edit alerts, manage alerts & in the inline text for the delivery method 
 * 5.2.1 - 2025-12-08 - Fixes default value showing up as empty entry for alert_mediums
 * 5.2.0 - 2025-11-24 - Added ability to send alerts to a Microsoft Teams channel
 * 5.1.0 - 2025-09-29 Refactored UI to support different mediums to alert and changes to alert via Slack

CustomAlerts.php

@@ -269,6 +269,9 @@ public function getClientSideTranslationKeys(&$translations)
         $translations[] = 'General_No';
         $translations[] = 'CustomAlerts_MediumTitle';
         $translations[] = 'CustomAlerts_MediumDescription';
+        $translations[] = 'CustomAlerts_ManageTooltip';
+        $translations[] = 'CustomAlerts_CreateTooltip';
+        $translations[] = 'CustomAlerts_LearnMore';
     }
 
     public static function getReportMediumOptions(): array

lang/en.json

@@ -83,6 +83,9 @@
         "EmptyReportMediums": "At least one delivery method must be selected.",
         "InvalidReportMediums": "Invalid report mediums value. Allowed values are %1$s.",
         "InvalidEmailReportParameter": "Please select \"Send to me\" or specify valid email addresses to email the report.",
-        "InvalidPhoneNumberReportParameter": "Phone numbers cannot be empty. Please activate at least one phone number by accessing the Mobile Messaging settings page."
+        "InvalidPhoneNumberReportParameter": "Phone numbers cannot be empty. Please activate at least one phone number by accessing the Mobile Messaging settings page.",
+        "ManageTooltip": "Get notified instantly when metrics vary from expected patterns. Receive alerts through Email, SMS, Slack, or Microsoft Teams by selecting your preferred channel when creating or editing an alert.",
+        "CreateTooltip": "You can send alerts via Email, SMS, Slack, or Microsoft Teams. Choose your preferred delivery method when creating or editing an alert.",
+        "LearnMore": "Learn more"
     }
 }

plugin.json

@@ -1,7 +1,7 @@
 {
     "name": "CustomAlerts",
     "description": "Create custom Alerts to be notified of important changes on your website or app! ",
-    "version": "5.2.1",
+    "version": "5.2.2",
     "require": {
         "matomo": ">=5.0.0-b1,<6.0.0-b1"
     },

templates/index.twig

@@ -5,7 +5,7 @@
 {% block content %}
     <div
         vue-entry="CustomAlerts.ListAlertsPage"
-        content-title="{{ title|json_encode }}"
+        title="{{ title|json_encode }}"
         alerts="{{ alerts|default(null)|json_encode }}"
     ></div>
 {% endblock %}

vue/src/EditAlert/EditAlert.vue

@@ -9,6 +9,7 @@
     class="alerts"
     :content-title="headline"
   >
+    <p>{{ translate('CustomAlerts_CreateTooltip')}}</p>
     <div v-form>
       <div>
         <Field
@@ -61,7 +62,7 @@
             name="report_mediums"
             id="report_mediums"
             :title="translate('CustomAlerts_MediumTitle')"
-            :inline-help="translate('CustomAlerts_MediumDescription')"
+            :inline-help="$sanitize(getDeliveryMediumInlineTooltip)"
             :options="alertReportMediumOptions"
             :model-value="actualAlert.report_mediums"
             @update:model-value="actualAlert.report_mediums = $event;"
@@ -252,6 +253,7 @@ import {
   SiteRef,
   useExternalPluginComponent,
   ContentBlock,
+  externalLink,
 } from 'CoreHome';
 import { Form, Field, SaveButton } from 'CorePluginsAdmin';
 import { Alert as AlertType } from '../types';
@@ -622,6 +624,9 @@ export default defineComponent({
         '</a>',
       );
     },
+    getDeliveryMediumInlineTooltip(): string {
+      return `${translate('CustomAlerts_CreateTooltip')} ${externalLink('https://matomo.org/faq/general/create-and-manage-custom-alerts/')}  ${translate('CustomAlerts_LearnMore')}.`;
+    },
     metricOptions(): Option[] {
       return Object.entries(this.actualReportMetadata?.metrics || {}).map(([key, value]) => ({
         key,

vue/src/ListAlerts/ListAlertsPage.vue

@@ -9,6 +9,7 @@
     class="alerts"
     :content-title="title"
   >
+    <p>{{ translate('CustomAlerts_ManageTooltip') }}</p>
     <ListAlerts :alerts="alerts"/>
 
     <div class="ui-confirm" id="confirm">