Replace BSTooltip with GlTooltip in app/assets/javascripts/pages/users/index.js

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);
   }
 }