Update content of visible tooltips

2 files changed, 38 insertions, 9 deletions

diff --git a/app/assets/javascripts/vue_shared/directives/tooltip.js b/app/assets/javascripts/vue_shared/directives/tooltip.js
index 4f2412ce520..549d27e96d9 100644
--- a/app/assets/javascripts/vue_shared/directives/tooltip.js
+++ b/app/assets/javascripts/vue_shared/directives/tooltip.js
@@ -9,6 +9,14 @@ export default {
 
   componentUpdated(el) {
     $(el).tooltip('_fixTitle');
+
+    // update visible tooltips
+    const tooltipInstance = $(el).data('bs.tooltip');
+    const tip = tooltipInstance.getTipElement();
+    tooltipInstance.setElementContent(
+      $(tip.querySelectorAll('.tooltip-inner')),
+      tooltipInstance.getTitle(),
+    );
   },
 
   unbind(el) {
diff --git a/spec/javascripts/vue_shared/directives/tooltip_spec.js b/spec/javascripts/vue_shared/directives/tooltip_spec.js
index 305d2fd5af4..1d516a280b0 100644
--- a/spec/javascripts/vue_shared/directives/tooltip_spec.js
+++ b/spec/javascripts/vue_shared/directives/tooltip_spec.js
@@ -13,24 +13,45 @@ describe('Tooltip directive', () => {
 
   describe('with a single tooltip', () => {
     beforeEach(() => {
-      const SomeComponent = Vue.extend({
+      setFixtures('<div id="dummy-element"></div>');
+      vm = new Vue({
+        el: '#dummy-element',
         directives: {
           tooltip,
         },
-        template: `
-          <div
-            v-tooltip
-            title="foo">
-          </div>
-        `,
+        data() {
+          return {
+            tooltip: 'some text',
+          };
+        },
+        template: '<div v-tooltip :title="tooltip"></div>',
       });
-
-      vm = new SomeComponent().$mount();
     });
 
     it('should have tooltip plugin applied', () => {
       expect($(vm.$el).data('bs.tooltip')).toBeDefined();
     });
+
+    it('displays the title as tooltip', () => {
+      $(vm.$el).tooltip('show');
+      const tooltipElement = document.querySelector('.tooltip-inner');
+
+      expect(tooltipElement.innerText).toContain('some text');
+    });
+
+    it('updates a visible tooltip', done => {
+      $(vm.$el).tooltip('show');
+      const tooltipElement = document.querySelector('.tooltip-inner');
+
+      vm.tooltip = 'other text';
+
+      Vue.nextTick()
+        .then(() => {
+          expect(tooltipElement).toContainText('other text');
+          done();
+        })
+        .catch(done.fail);
+    });
   });
 
   describe('with multiple tooltips', () => {