Write custom directive for dynamic tooltips.issuable-update-events

2 files changed, 27 insertions, 0 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 7dd9adac736..16bac73c9f4 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -46,6 +46,7 @@
 /*= require date.format */
 /*= require_directory ./behaviors */
 /*= require_directory ./blob */
+/*= require_directory ./directives */
 /*= require_directory ./templates */
 /*= require_directory ./commit */
 /*= require_directory ./extensions */
diff --git a/app/assets/javascripts/directives/tooltip_title.js.es6 b/app/assets/javascripts/directives/tooltip_title.js.es6
new file mode 100644
index 00000000000..0a08b2e8332
--- /dev/null
+++ b/app/assets/javascripts/directives/tooltip_title.js.es6
@@ -0,0 +1,26 @@
+//= require vue
+
+((global) => {
+
+  /**
+   * Bootstrap tooltips are intialized once per pageload. This directive ensures the text used
+   * to populate the tooltip is updated dynamically. The tooltip is initialized by reading the
+   * `title` attribute and copying its value to the `data-original-title` attribute for lookup each
+   * time the tooltip is shown. Rhe tooltip's `title` is not stored or accessed elsewhere, making
+   * it  reasonably safe to write to as needed.
+   */
+
+  Vue.directive('tooltip-title', {
+    update: function (val) {
+      // TODO: When we bump to Vue 2.0, `el` will now be passed to this function
+      // TODO: Remove/revise this when we transition away from Bootstrap tooltips
+
+      const updatedValue = val || this.el.getAttribute('title');
+
+      this.el.setAttribute('title', updatedValue);
+
+      this.el.setAttribute('data-original-title', updatedValue);
+    },
+  });
+
+})(window.gl || (window.gl = {}));