Implement an API to replace Bootstrap tooltips with GitLab UI tooltips in HAML/Vanilla JS

Bootstrap Tooltip APIs to replace

To replace the Bootstrap’s tooltips with GitLab UI’s tooltips, we need to build an API that provides all the features provided by Bootstrap to ease the migration process. The following list describes the Bootstrap tooltip APIs used across the application:

• tooltip initialization: !36452 (merged)
• tooltip('_fixTitle'): Refreshes the tooltip content by fetching the most up-to-date value of the tooltip attribute. !41941 (merged)
• tooltip('dispose'): Hides and destroys the tooltip for a given element. !39379 (merged)
• tooltip('hide/show'): Programmatically hides or shows a tooltip. !41941 (merged)
• tooltip('disable/enable'): Enables or disables a tooltip. !41941 (merged)
• Bootstrap API facade: !42399 (merged)

Instructions

To migrate a Bootstrap tooltip API call to the GlTooltip API, import the GlTooltip API equivalent where you need it:

// Import the GlTooltip API you will use in the JavaScript file
import { hide } from `~/tooltips`; // This method hides a tooltip programmatically 

The following table maps the Bootstrap API calls to the GlTooltip equivalents. You can pass either an iterable object with DOM Elements or a jQuery object. Ideally, you should remove the jQuery wrapper and pass the DOM Elements directly.

Bootstrap	GlTooltip
$el.tooltip({})	initTooltips({})
$el.tooltip('_fixTitle')	fixTitle($el)
$el.tooltip('enable')	enable($el)
$el.tooltip('disable')	disable($el)
$el.tooltip('hide')	hide($el)
$el.tooltip('show')	show($el)
$el.tooltip('dispose')	dispose($el)

Examples

Hiding a tooltip

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import { hide } from '~/tooltips';
 
 export const addTooltipToEl = el => {
   const textEl = el.querySelector('.js-breadcrumb-item-text');
@@ -23,9 +24,11 @@ export default () => {
     topLevelLinks.forEach(el => addTooltipToEl(el));
 
     $expander.closest('.dropdown').on('show.bs.dropdown hide.bs.dropdown', e => {
-      $('.js-breadcrumbs-collapsed-expander', e.currentTarget)
-        .toggleClass('open')
-        .tooltip('hide');
+      const $el = $('.js-breadcrumbs-collapsed-expander', e.currentTarget);
+
+      $el.toggleClass('open');
+
+      hide($el);
     });
   }
 };

Updating the tooltip’s content

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import { __ } from './locale';
 import axios from './lib/utils/axios_utils';
 import { deprecatedCreateFlash as flash } from './flash';
+import { fixTitle } from '~/tooltip';
 
 const tooltipTitles = {
   group: {
@@ -66,6 +67,8 @@ export default class ProjectLabelSubscription {
     const type = /group/.test(originalTitle) ? 'group' : 'project';
     const newTitle = tooltipTitles[type][newStatus];
 
-    $button.attr('title', newTitle).tooltip('_fixTitle');
+    $button.attr('title', newTitle);
+
+    fixTitle($button);
   }
 }