DOC-817 Add description of beta on hover of the beta label (#263)

* Add description of beta on hover of the beta label

* Remove duplicate selector

Author: JakeSCahill

src/css/context-switcher.css

@@ -12,6 +12,10 @@
   margin: 0;
 }
 
+.beta-label > p:hover {
+  cursor: pointer;
+}
+
 .context-switcher button {
   background: none;
   color: inherit;
@@ -37,7 +41,3 @@
   color: var(--link-highlight-color);
   padding: 3px;
 }
-
-.beta-label > p:hover {
-  cursor: default;
-}

src/partials/article.hbs

@@ -28,8 +28,20 @@
 {{/if}}
 {{#if page.attributes.beta}}
   <div class="beta-label">
-    <p title="This feature is in beta.">Beta</p>
+    <p>Beta</p>
   </div>
+  <script>
+  const betaButton = document.querySelector('.beta-label p');
+  // Create a Tippy instance on the button
+  const tippyInstance = tippy(betaButton, {
+    content: 'This feature is in beta. Features in beta are available for testing and feedback. They are not supported by Redpanda and should not be used in production environments.',
+    animation: 'scale',
+    theme: 'redpanda-term',
+    touch: 'hold',
+    interactive: true,
+    allowHTML: true,
+  });
+  </script>
 {{/if}}
 {{#if (eq page.attributes.role 'home')}}
   {{> home}}