Fix empty content of tooltip after 'copy' action in docs (#35773)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
twbs · Feb 7, 2022 · 96c67a7 · 96c67a7
1 parent ff2472b
commit 96c67a7
Showing 1 changed file with 5 additions and 6 deletions.
diff --git a/site/assets/js/application.js b/site/assets/js/application.js
@@ -118,15 +118,16 @@
   }
 
   // Insert copy to clipboard button before .highlight
-  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
+  var btnTitle = 'Copy to clipboard'
+  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard">Copy</button></div>'
   document.querySelectorAll('div.highlight')
     .forEach(function (element) {
       element.insertAdjacentHTML('beforebegin', btnHtml)
     })
 
   document.querySelectorAll('.btn-clipboard')
     .forEach(function (btn) {
-      var tooltipBtn = new bootstrap.Tooltip(btn)
+      var tooltipBtn = new bootstrap.Tooltip(btn, { title: btnTitle })
 
       btn.addEventListener('mouseleave', function () {
         // Explicitly hide tooltip, since after clicking it remains
@@ -144,11 +145,10 @@
 
   clipboard.on('success', function (event) {
     var tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
-    var originalTitle = event.trigger.getAttribute('title')
 
     tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
     event.trigger.addEventListener('hidden.bs.tooltip', function () {
-      tooltipBtn.setContent({ '.tooltip-inner': originalTitle })
+      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
     }, { once: true })
     event.clearSelection()
   })
@@ -157,11 +157,10 @@
     var modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
     var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
     var tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
-    var originalTitle = event.trigger.getAttribute('title')
 
     tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg })
     event.trigger.addEventListener('hidden.bs.tooltip', function () {
-      tooltipBtn.setContent({ '.tooltip-inner': originalTitle })
+      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
     }, { once: true })
   })