1 files changed, 12 insertions, 8 deletions
diff --git a/app/assets/javascripts/tooltips/components/tooltips.vue b/app/assets/javascripts/tooltips/components/tooltips.vue
index 05927006ea6..90bdf06bc4c 100644
--- a/app/assets/javascripts/tooltips/components/tooltips.vue
+++ b/app/assets/javascripts/tooltips/components/tooltips.vue
@@ -2,7 +2,7 @@
 import { GlTooltip, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 
-const getTooltipTitle = element => {
+const getTooltipTitle = (element) => {
   return element.getAttribute('title') || element.dataset.title;
 };
 
@@ -37,8 +37,8 @@ export default {
     };
   },
   created() {
-    this.observer = new MutationObserver(mutations => {
-      mutations.forEach(mutation => {
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
         mutation.removedNodes.forEach(this.dispose);
       });
     });
@@ -49,10 +49,11 @@ export default {
   methods: {
     addTooltips(elements, config) {
       const newTooltips = elements
-        .filter(element => !this.tooltipExists(element))
-        .map(element => newTooltip(element, config));
+        .filter((element) => !this.tooltipExists(element))
+        .map((element) => newTooltip(element, config))
+        .filter((tooltip) => tooltip.title);
 
-      newTooltips.forEach(tooltip => this.observe(tooltip));
+      newTooltips.forEach((tooltip) => this.observe(tooltip));
 
       this.tooltips.push(...newTooltips);
     },
@@ -90,9 +91,12 @@ export default {
       return Boolean(this.findTooltipByTarget(element));
     },
     findTooltipByTarget(element) {
-      return this.tooltips.find(tooltip => tooltip.target === element);
+      return this.tooltips.find((tooltip) => tooltip.target === element);
     },
   },
+  safeHtmlConfig: {
+    ADD_TAGS: ['gl-emoji'],
+  },
 };
 </script>
 <template>
@@ -110,7 +114,7 @@ export default {
       :disabled="tooltip.disabled"
       :show="tooltip.show"
     >
-      <span v-if="tooltip.html" v-safe-html="tooltip.title"></span>
+      <span v-if="tooltip.html" v-safe-html:[$options.safeHtmlConfig]="tooltip.title"></span>
       <span v-else>{{ tooltip.title }}</span>
     </gl-tooltip>
   </div>