From bd0a32ec8abebadec66e9139431ad35cdb9afb1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 13 Mar 2019 18:06:15 +0000
Subject: [PATCH] chore(ui): hide annotation details only when clicking on the
 - icon

This changes handling of annotation hide/show clicks. Right now annotation details are toggled when anything inside the annotation div is clicked. With this change showing annotation details stays the same (click anywhere), but hiding those details only works when clicking the minus icon. A tooltip was added and cursor changes to pointer only when hoovering over clickable elements.

Fixes #518
---
 .../Alert/__snapshots__/index.test.js.snap    | 178 ++++++++++-------
 .../__snapshots__/index.test.js.snap          |  80 ++++----
 .../AlertGrid/AlertGroup/Annotation/index.js  |  49 +++--
 .../AlertGroup/Annotation/index.test.js       |  15 +-
 .../__snapshots__/index.test.js.snap          | 186 ++++++++++--------
 5 files changed, 289 insertions(+), 219 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
index 464c2d83b..b86ba39b4 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
@@ -4,44 +4,58 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
 "
 <li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
   <div>
-    <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"search-minus\\"
-           class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
-      >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+    <div class
+         style=\\"display: inline;\\"
+         data-tooltipped
+         aria-describedby=\\"tippy-tooltip-5\\"
+         data-original-title=\\"Click the icon to hide annotation value\\"
+    >
+      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
+        <svg aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"search-minus\\"
+             class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1 cursor-pointer\\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 512 512\\"
         >
-        </path>
-      </svg>
-      <span class=\\"text-muted\\">
-        help:
-      </span>
-      <span class=\\"Linkify\\">
-        some long text
-      </span>
+          <path fill=\\"currentColor\\"
+                d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+          >
+          </path>
+        </svg>
+        <span class=\\"text-muted\\">
+          help:
+        </span>
+        <span class=\\"Linkify\\">
+          some long text
+        </span>
+      </div>
     </div>
-    <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"search-plus\\"
-           class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
-      >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+    <div class
+         style=\\"display: inline;\\"
+         data-tooltipped
+         aria-describedby=\\"tippy-tooltip-6\\"
+         data-original-title=\\"Click to show annotation value\\"
+    >
+      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
+        <svg aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"search-plus\\"
+             class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 512 512\\"
         >
-        </path>
-      </svg>
-      hidden
+          <path fill=\\"currentColor\\"
+                d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+          >
+          </path>
+        </svg>
+        hidden
+      </div>
     </div>
   </div>
   <span class=\\"components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
@@ -69,7 +83,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-3\\"
+       aria-describedby=\\"tippy-tooltip-7\\"
        data-original-title=\\"This alert is inhibited by other alerts\\"
   >
     <span class=\\"text-nowrap text-truncate mr-1 badge badge-light\\">
@@ -92,7 +106,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-4\\"
+       aria-describedby=\\"tippy-tooltip-8\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
     <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -107,7 +121,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-5\\"
+       aria-describedby=\\"tippy-tooltip-9\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
     <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -148,44 +162,58 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
 "
 <li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
   <div>
-    <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"search-minus\\"
-           class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
-      >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+    <div class
+         style=\\"display: inline;\\"
+         data-tooltipped
+         aria-describedby=\\"tippy-tooltip-1\\"
+         data-original-title=\\"Click the icon to hide annotation value\\"
+    >
+      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
+        <svg aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"search-minus\\"
+             class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1 cursor-pointer\\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 512 512\\"
         >
-        </path>
-      </svg>
-      <span class=\\"text-muted\\">
-        help:
-      </span>
-      <span class=\\"Linkify\\">
-        some long text
-      </span>
+          <path fill=\\"currentColor\\"
+                d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+          >
+          </path>
+        </svg>
+        <span class=\\"text-muted\\">
+          help:
+        </span>
+        <span class=\\"Linkify\\">
+          some long text
+        </span>
+      </div>
     </div>
-    <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"search-plus\\"
-           class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
-      >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+    <div class
+         style=\\"display: inline;\\"
+         data-tooltipped
+         aria-describedby=\\"tippy-tooltip-2\\"
+         data-original-title=\\"Click to show annotation value\\"
+    >
+      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
+        <svg aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"search-plus\\"
+             class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 512 512\\"
         >
-        </path>
-      </svg>
-      hidden
+          <path fill=\\"currentColor\\"
+                d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+          >
+          </path>
+        </svg>
+        hidden
+      </div>
     </div>
   </div>
   <span class=\\"components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
@@ -213,7 +241,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-1\\"
+       aria-describedby=\\"tippy-tooltip-3\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
     <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -228,7 +256,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-2\\"
+       aria-describedby=\\"tippy-tooltip-4\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
     <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
index f16c8350f..4f4798608 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
@@ -28,49 +28,59 @@ exports[`<RenderLinkAnnotation /> matches snapshot 1`] = `
 
 exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
 "
-<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
-  <svg aria-hidden=\\"true\\"
-       focusable=\\"false\\"
-       data-prefix=\\"fas\\"
-       data-icon=\\"search-plus\\"
-       class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
-       role=\\"img\\"
-       xmlns=\\"http://www.w3.org/2000/svg\\"
-       viewbox=\\"0 0 512 512\\"
-  >
-    <path fill=\\"currentColor\\"
-          d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+<div title=\\"Click to show annotation value\\"
+     class
+     style=\\"display:inline\\"
+>
+  <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
+    <svg aria-hidden=\\"true\\"
+         focusable=\\"false\\"
+         data-prefix=\\"fas\\"
+         data-icon=\\"search-plus\\"
+         class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+         role=\\"img\\"
+         xmlns=\\"http://www.w3.org/2000/svg\\"
+         viewbox=\\"0 0 512 512\\"
     >
-    </path>
-  </svg>
-  foo
+      <path fill=\\"currentColor\\"
+            d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+      >
+      </path>
+    </svg>
+    foo
+  </div>
 </div>
 "
 `;
 
 exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=true 1`] = `
 "
-<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
-  <svg aria-hidden=\\"true\\"
-       focusable=\\"false\\"
-       data-prefix=\\"fas\\"
-       data-icon=\\"search-minus\\"
-       class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
-       role=\\"img\\"
-       xmlns=\\"http://www.w3.org/2000/svg\\"
-       viewbox=\\"0 0 512 512\\"
-  >
-    <path fill=\\"currentColor\\"
-          d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+<div title=\\"Click the icon to hide annotation value\\"
+     class
+     style=\\"display:inline\\"
+>
+  <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
+    <svg aria-hidden=\\"true\\"
+         focusable=\\"false\\"
+         data-prefix=\\"fas\\"
+         data-icon=\\"search-minus\\"
+         class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1 cursor-pointer\\"
+         role=\\"img\\"
+         xmlns=\\"http://www.w3.org/2000/svg\\"
+         viewbox=\\"0 0 512 512\\"
     >
-    </path>
-  </svg>
-  <span class=\\"text-muted\\">
-    foo:
-  </span>
-  <span class=\\"Linkify\\">
-    some long text
-  </span>
+      <path fill=\\"currentColor\\"
+            d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+      >
+      </path>
+    </svg>
+    <span class=\\"text-muted\\">
+      foo:
+    </span>
+    <span class=\\"Linkify\\">
+      some long text
+    </span>
+  </div>
 </div>
 "
 `;
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
index aa297d949..88fa805a9 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
@@ -12,6 +12,7 @@ import { faSearchPlus } from "@fortawesome/free-solid-svg-icons/faSearchPlus";
 import { faSearchMinus } from "@fortawesome/free-solid-svg-icons/faSearchMinus";
 
 import { AlertStore } from "Stores/AlertStore";
+import { TooltipWrapper } from "Components/TooltipWrapper";
 
 import "./index.css";
 
@@ -36,8 +37,7 @@ const RenderNonLinkAnnotation = inject("alertStore")(
             this.visible = true;
           },
           hide(e) {
-            // don't action link clicks inside Linkify
-            if (e.target.nodeName !== "A") this.visible = false;
+            this.visible = false;
           }
         },
         {
@@ -62,30 +62,41 @@ const RenderNonLinkAnnotation = inject("alertStore")(
         const { name, value } = this.props;
 
         const className =
-          "mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break";
+          "mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break";
 
         if (!this.toggle.visible) {
           return (
-            <div className={className} onClick={this.toggle.show}>
-              <FontAwesomeIcon icon={faSearchPlus} className="mr-1" />
-              {name}
-            </div>
+            <TooltipWrapper title="Click to show annotation value">
+              <div
+                className={`${className} cursor-pointer`}
+                onClick={this.toggle.show}
+              >
+                <FontAwesomeIcon icon={faSearchPlus} className="mr-1" />
+                {name}
+              </div>
+            </TooltipWrapper>
           );
         }
 
         return (
-          <div key={name} className={className} onClick={this.toggle.hide}>
-            <FontAwesomeIcon icon={faSearchMinus} className="mr-1" />
-            <span className="text-muted">{name}: </span>
-            <Linkify
-              properties={{
-                target: "_blank",
-                rel: "noopener noreferrer"
-              }}
-            >
-              {value}
-            </Linkify>
-          </div>
+          <TooltipWrapper title="Click the icon to hide annotation value">
+            <div key={name} className={className}>
+              <FontAwesomeIcon
+                icon={faSearchMinus}
+                className="mr-1 cursor-pointer"
+                onClick={this.toggle.hide}
+              />
+              <span className="text-muted">{name}: </span>
+              <Linkify
+                properties={{
+                  target: "_blank",
+                  rel: "noopener noreferrer"
+                }}
+              >
+                {value}
+              </Linkify>
+            </div>
+          </TooltipWrapper>
         );
       }
     }
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.test.js
index cddd63457..098ad0fcb 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.test.js
@@ -98,27 +98,20 @@ describe("<RenderNonLinkAnnotation />", () => {
     expect(link.text()).toBe("http://example.com");
   });
 
-  it("clicking on + icon hides the value", () => {
+  it("clicking on - icon hides the value", () => {
     const tree = MountedNonLinkAnnotation(true);
     expect(tree.html()).toMatch(/fa-search-minus/);
     expect(tree.html()).toMatch(/some long text/);
-    tree.find("div").simulate("click");
+    tree.find(".fa-search-minus").simulate("click");
     expect(tree.html()).toMatch(/fa-search-plus/);
     expect(tree.html()).not.toMatch(/some long text/);
   });
 
-  it("clicking on a link inside annotation doesn't hide the value", () => {
-    const tree = MountedNonLinkAnnotationContainingLink(true);
-    expect(tree.html()).toMatch(/fa-search-minus/);
-    tree.find("a").simulate("click");
-    expect(tree.html()).toMatch(/fa-search-minus/);
-  });
-
-  it("clicking on - icon shows the value", () => {
+  it("clicking on + icon shows the value", () => {
     const tree = MountedNonLinkAnnotation(false);
     expect(tree.html()).toMatch(/fa-search-plus/);
     expect(tree.html()).not.toMatch(/some long text/);
-    tree.find("div").simulate("click");
+    tree.find(".components-grid-annotation").simulate("click");
     expect(tree.html()).toMatch(/fa-search-minus/);
     expect(tree.html()).toMatch(/some long text/);
   });
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
index eb12ad65a..f1b578125 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
@@ -4,50 +4,64 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
 "
 <div class=\\"card-footer px-2 py-1\\">
   <div class=\\"mb-1\\">
-    <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"search-minus\\"
-           class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
-      >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+    <div class
+         style=\\"display: inline;\\"
+         data-tooltipped
+         aria-describedby=\\"tippy-tooltip-1\\"
+         data-original-title=\\"Click the icon to hide annotation value\\"
+    >
+      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
+        <svg aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"search-minus\\"
+             class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1 cursor-pointer\\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 512 512\\"
         >
-        </path>
-      </svg>
-      <span class=\\"text-muted\\">
-        summary:
-      </span>
-      <span class=\\"Linkify\\">
-        This is summary
-      </span>
+          <path fill=\\"currentColor\\"
+                d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+          >
+          </path>
+        </svg>
+        <span class=\\"text-muted\\">
+          summary:
+        </span>
+        <span class=\\"Linkify\\">
+          This is summary
+        </span>
+      </div>
     </div>
-    <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"search-plus\\"
-           class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
-      >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+    <div class
+         style=\\"display: inline;\\"
+         data-tooltipped
+         aria-describedby=\\"tippy-tooltip-2\\"
+         data-original-title=\\"Click to show annotation value\\"
+    >
+      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
+        <svg aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"search-plus\\"
+             class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 512 512\\"
         >
-        </path>
-      </svg>
-      hidden
+          <path fill=\\"currentColor\\"
+                d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+          >
+          </path>
+        </svg>
+        hidden
+      </div>
     </div>
   </div>
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-1\\"
+       aria-describedby=\\"tippy-tooltip-3\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
     <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -62,7 +76,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-2\\"
+       aria-describedby=\\"tippy-tooltip-4\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
     <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -77,7 +91,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-3\\"
+       aria-describedby=\\"tippy-tooltip-5\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
     <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -92,7 +106,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-4\\"
+       aria-describedby=\\"tippy-tooltip-6\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
     <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -133,50 +147,64 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
 "
 <div class=\\"card-footer px-2 py-1\\">
   <div class=\\"mb-1\\">
-    <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"search-minus\\"
-           class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
-      >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+    <div class
+         style=\\"display: inline;\\"
+         data-tooltipped
+         aria-describedby=\\"tippy-tooltip-13\\"
+         data-original-title=\\"Click the icon to hide annotation value\\"
+    >
+      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
+        <svg aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"search-minus\\"
+             class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1 cursor-pointer\\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 512 512\\"
         >
-        </path>
-      </svg>
-      <span class=\\"text-muted\\">
-        summary:
-      </span>
-      <span class=\\"Linkify\\">
-        This is summary
-      </span>
+          <path fill=\\"currentColor\\"
+                d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+          >
+          </path>
+        </svg>
+        <span class=\\"text-muted\\">
+          summary:
+        </span>
+        <span class=\\"Linkify\\">
+          This is summary
+        </span>
+      </div>
     </div>
-    <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"search-plus\\"
-           class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
-      >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+    <div class
+         style=\\"display: inline;\\"
+         data-tooltipped
+         aria-describedby=\\"tippy-tooltip-14\\"
+         data-original-title=\\"Click to show annotation value\\"
+    >
+      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
+        <svg aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"search-plus\\"
+             class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 512 512\\"
         >
-        </path>
-      </svg>
-      hidden
+          <path fill=\\"currentColor\\"
+                d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+          >
+          </path>
+        </svg>
+        hidden
+      </div>
     </div>
   </div>
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-9\\"
+       aria-describedby=\\"tippy-tooltip-15\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
     <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -191,7 +219,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-10\\"
+       aria-describedby=\\"tippy-tooltip-16\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
     <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -206,7 +234,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-11\\"
+       aria-describedby=\\"tippy-tooltip-17\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
     <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -221,7 +249,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
   <div class
        style=\\"display: inline;\\"
        data-tooltipped
-       aria-describedby=\\"tippy-tooltip-12\\"
+       aria-describedby=\\"tippy-tooltip-18\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
     <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -273,7 +301,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
               <div class
                    style=\\"display: inline;\\"
                    data-tooltipped
-                   aria-describedby=\\"tippy-tooltip-13\\"
+                   aria-describedby=\\"tippy-tooltip-19\\"
                    data-original-title=\\"Toggle silence details\\"
               >
                 <svg aria-hidden=\\"true\\"