docs: add a StackBlitz "Try It" button in code examples (#35644)

Co-authored-by: GeoSot <[email protected]>
Co-authored-by: XhmikosR <[email protected]>

1 files changed, 17 insertions, 10 deletions

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index b267bfb6f..1719ed9f2 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -125,17 +125,24 @@
       element.insertAdjacentHTML('beforebegin', btnHtml)
     })
 
-  document.querySelectorAll('.btn-clipboard')
-    .forEach(function (btn) {
-      var tooltipBtn = new bootstrap.Tooltip(btn, { title: btnTitle })
-
-      btn.addEventListener('mouseleave', function () {
-        // Explicitly hide tooltip, since after clicking it remains
-        // focused (as it's a button), so tooltip would otherwise
-        // remain visible until focus is moved away
-        tooltipBtn.hide()
-      })
+  /**
+   *
+   * @param {HTMLButtonElement} btn
+   * @param {string} title
+   */
+  function snippetButtonTooltip(btn, title) {
+    var tooltipBtn = new bootstrap.Tooltip(btn, { title: title })
+
+    btn.addEventListener('mouseleave', function () {
+      // Explicitly hide tooltip, since after clicking it remains
+      // focused (as it's a button), so tooltip would otherwise
+      // remain visible until focus is moved away
+      tooltipBtn.hide()
     })
+  }
+
+  snippetButtonTooltip(document.querySelector('.btn-clipboard'), 'Copy to clipboard')
+  snippetButtonTooltip(document.querySelector('.btn-edit'), 'Edit on Stackblitz')
 
   var clipboard = new ClipboardJS('.btn-clipboard', {
     target: function (trigger) {