@gitlab/ui 111.8.0 → 111.9.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [111.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.8.1...v111.9.0) (2025-03-27)
+
+
+### Features
+
+* **GlTooltip:** add custom global container selector ([691e2b0](https://gitlab.com/gitlab-org/gitlab-ui/commit/691e2b0a7dda4135f2c8b0a665952edb51ec046e))
+
+## [111.8.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.8.0...v111.8.1) (2025-03-27)
+
+
+### Bug Fixes
+
+* **GlLineChart, GlAreaChart, GlStackedColumn:** Fix tooltip updates ([7ac5e58](https://gitlab.com/gitlab-org/gitlab-ui/commit/7ac5e589838ad720e2767fb986b628b026467745))
+
 # [111.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.7.1...v111.8.0) (2025-03-26)
 
 

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -2,7 +2,7 @@ import debounce from 'lodash/debounce';
 import { translate } from '../../../utils/i18n';
 import GlAvatar from '../avatar/avatar';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown';
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { breadCrumbSizeOptions } from '../../../utils/constants';
 import GlBreadcrumbItem from './breadcrumb_item';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/components/base/daterange_picker/daterange_picker.js

@@ -1,5 +1,5 @@
 import uniqueId from 'lodash/uniqueId';
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { getDateInPast, getDateInFuture, getDayDifference } from '../../../utils/datetime_utility';
 import GlDatepicker from '../datepicker/datepicker';
 import GlIcon from '../icon/icon';

package/dist/components/base/filtered_search/filtered_search.js

@@ -1,7 +1,7 @@
 import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
 import { PortalTarget } from 'portal-vue';
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlIcon from '../icon/icon';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
 import GlFilteredSearchTerm from './filtered_search_term';

package/dist/components/base/search_box_by_click/search_box_by_click.js

@@ -1,4 +1,4 @@
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button';
 import GlButton from '../button/button';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown';

package/dist/components/base/sorting/sorting.js

@@ -1,4 +1,4 @@
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlButton from '../button/button';
 import GlButtonGroup from '../button_group/button_group';
 import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox';

package/dist/components/base/tooltip/tooltip.js

@@ -1,6 +1,7 @@
 import { BTooltip } from '../../../vendor/bootstrap-vue/src/components/tooltip/tooltip';
 import { tooltipDelay } from '../../../utils/constants';
 import tooltipMixin from '../../mixins/tooltip_mixin';
+import { getGlTooltipDefaultContainer } from '../../../directives/tooltip/container';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
@@ -13,14 +14,15 @@ var script = {
   },
   mixins: [tooltipMixin(tooltipRefName)],
   inheritAttrs: false,
-  tooltipRefName
+  tooltipRefName,
+  getGlTooltipDefaultContainer
 };
 
 /* script */
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tooltip',_vm._g(_vm._b({ref:_vm.$options.tooltipRefName,attrs:{"delay":_vm.$options.tooltipDelay}},'b-tooltip',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tooltip',_vm._g(_vm._b({ref:_vm.$options.tooltipRefName,attrs:{"container":_vm.$attrs.container || _vm.$options.getGlTooltipDefaultContainer(),"delay":_vm.$options.tooltipDelay}},'b-tooltip',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/area/area.js

@@ -146,18 +146,7 @@ var script = {
       return generateAnnotationSeries(this.annotations);
     },
     options() {
-      const defaultAreaChartOptions = {
-        xAxis: {
-          axisPointer: {
-            show: true,
-            lineStyle: {
-              type: 'solid'
-            },
-            label: {
-              formatter: this.formatTooltipText
-            }
-          }
-        },
+      const areaChartOptions = {
         yAxis: {
           axisTick: {
             show: false
@@ -167,7 +156,20 @@ var script = {
           show: false
         }
       };
-      const mergedOptions = merge({}, defaultChartOptions, defaultAreaChartOptions, this.option, dataZoomAdjustments(this.option.dataZoom));
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText
+            }
+          }
+        }
+      };
+      const mergedOptions = merge({}, defaultChartOptions, areaChartOptions, this.formatTooltipText ? deprecatedTooltipFormatterOptions : {}, this.option, dataZoomAdjustments(this.option.dataZoom));
       // All chart options can be merged but series
       // needs to be handled specially.
       return mergeSeriesToOptions(mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations), this.series);

package/dist/components/charts/line/line.js

@@ -140,14 +140,8 @@ var script = {
       return generateAnnotationSeries(this.annotations);
     },
     options() {
-      const defaultLineChartOptions = {
+      const lineChartOptions = {
         xAxis: {
-          axisPointer: {
-            show: true,
-            label: {
-              formatter: this.formatTooltipText
-            }
-          },
           axisTick: {
             alignWithLabel: true,
             show: true,
@@ -160,7 +154,20 @@ var script = {
           show: false
         }
       };
-      const mergedOptions = merge({}, defaultChartOptions, defaultLineChartOptions, this.option, dataZoomAdjustments(this.option.dataZoom));
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText
+            }
+          }
+        }
+      };
+      const mergedOptions = merge({}, defaultChartOptions, lineChartOptions, this.formatTooltipText ? deprecatedTooltipFormatterOptions : {}, this.option, dataZoomAdjustments(this.option.dataZoom));
       // All chart options can be merged but series
       // needs to be handled specially
       return mergeSeriesToOptions(mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations), this.series);

package/dist/components/charts/stacked_column/stacked_column.js

@@ -1,5 +1,5 @@
 import merge from 'lodash/merge';
-import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
+import { yAxis, generateBarSeries, generateLineSeries, gridWithSecondaryYAxis, grid, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
@@ -205,7 +205,7 @@ var script = {
       return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
     },
     options() {
-      const mergedOptions = merge({}, defaultChartOptions, {
+      const stackedColumnChartOptions = {
         grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
         xAxis: {
           boundaryGap: true,
@@ -217,11 +217,7 @@ var script = {
             show: false
           },
           axisPointer: {
-            show: true,
-            type: 'none',
-            label: {
-              formatter: this.formatTooltipText
-            }
+            type: 'none'
           },
           data: this.groupBy,
           name: this.xAxisTitle,
@@ -238,7 +234,21 @@ var script = {
         legend: {
           show: false
         }
-      }, this.option, dataZoomAdjustments(this.option.dataZoom));
+      };
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText
+            }
+          }
+        }
+      };
+      const mergedOptions = merge({}, defaultChartOptions, stackedColumnChartOptions, this.formatTooltipText ? deprecatedTooltipFormatterOptions : {}, this.option, dataZoomAdjustments(this.option.dataZoom));
       // All chart options can be merged but series
       // needs to be handled specially
       return mergeSeriesToOptions(mergedOptions, this.series);

package/dist/components/shared_components/clear_icon_button/clear_icon_button.js

@@ -1,4 +1,4 @@
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlButton from '../../base/button/button';
 import { translate } from '../../../utils/i18n';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/components/utilities/truncate/truncate.js

@@ -1,4 +1,4 @@
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { POSITION, ZERO_WIDTH_SPACE } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/directives/tooltip/container.js

@@ -0,0 +1,7 @@
+let containerSelector;
+const setGlTooltipDefaultContainer = selector => {
+  containerSelector = selector;
+};
+const getGlTooltipDefaultContainer = () => containerSelector;
+
+export { getGlTooltipDefaultContainer, setGlTooltipDefaultContainer };

package/dist/directives/tooltip/tooltip.js

@@ -0,0 +1,18 @@
+import { VBTooltip } from '../../vendor/bootstrap-vue/src/directives/tooltip';
+import { getGlTooltipDefaultContainer } from './container';
+
+const patchHook = hook => (el, bindings, vnode) => {
+  hook(el, {
+    ...bindings,
+    arg: bindings.arg || getGlTooltipDefaultContainer()
+  }, vnode);
+};
+const bind = patchHook(VBTooltip.bind);
+const componentUpdated = patchHook(VBTooltip.componentUpdated);
+const GlTooltipDirective = {
+  ...VBTooltip,
+  bind,
+  componentUpdated
+};
+
+export { GlTooltipDirective };

package/dist/index.js

@@ -104,7 +104,8 @@ export { default as GlSprintf } from './components/utilities/sprintf/sprintf';
 export { default as GlTruncate } from './components/utilities/truncate/truncate';
 export { default as GlTruncateText } from './components/utilities/truncate_text/truncate_text';
 export { GlModalDirective } from './directives/modal';
-export { GlTooltipDirective } from './directives/tooltip';
+export { GlTooltipDirective } from './directives/tooltip/tooltip';
+export { setGlTooltipDefaultContainer } from './directives/tooltip/container';
 export { GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
 export { GlCollapseToggleDirective } from './directives/collapse_toggle';
 export { SafeLinkDirective as GlSafeLinkDirective } from './directives/safe_link/safe_link';

package/dist/tokens/tokens_story.js

@@ -1,5 +1,5 @@
 import { colorFromBackground } from '../utils/utils';
-import { GlTooltipDirective } from '../directives/tooltip';
+import { GlTooltipDirective } from '../directives/tooltip/tooltip';
 import GlBadge from '../components/base/badge/badge';
 import GlColorContrast from '../internal/color_contrast/color_contrast';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/tokens/tokens_table.js

@@ -6,7 +6,7 @@ import GlSearchBoxByType from '../components/base/search_box_by_type/search_box_
 import GlLink from '../components/base/link/link';
 import GlTable from '../components/base/table/table';
 import GlPagination from '../components/base/pagination/pagination';
-import { GlTooltipDirective } from '../directives/tooltip';
+import { GlTooltipDirective } from '../directives/tooltip/tooltip';
 import TOKENS_DEFAULT from './build/json/tokens.json';
 import TOKENS_DARK from './build/json/tokens.dark.json';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/utils/charts/config.js

@@ -37,6 +37,10 @@ const grid = {
   left: 64,
   right: 32
 };
+
+/**
+ * Options for charts where the y-axis is the metrics axis.
+ */
 const defaultChartOptions = {
   grid,
   xAxis,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "111.8.0",
+  "version": "111.9.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -4,7 +4,7 @@ import debounce from 'lodash/debounce';
 import { translate } from '../../../utils/i18n';
 import GlAvatar from '../avatar/avatar.vue';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { breadCrumbSizeOptions } from '../../../utils/constants';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -1,6 +1,6 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { getDayDifference, getDateInPast, getDateInFuture } from '../../../utils/datetime_utility';
 import GlDatepicker from '../datepicker/datepicker.vue';
 import GlIcon from '../icon/icon.vue';

package/src/components/base/filtered_search/filtered_search.vue

@@ -2,7 +2,7 @@
 import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
 import { PortalTarget } from 'portal-vue';
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlIcon from '../icon/icon.vue';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click.vue';
 import GlFilteredSearchTerm from './filtered_search_term.vue';

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button.vue';
 import GlButton from '../button/button.vue';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';

package/src/components/base/sorting/sorting.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlButton from '../button/button.vue';
 import GlButtonGroup from '../button_group/button_group.vue';
 import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox.vue';

package/src/components/base/tooltip/tooltip.vue

@@ -3,6 +3,7 @@
 import { BTooltip } from '../../../vendor/bootstrap-vue/src/components/tooltip/tooltip';
 import { tooltipDelay } from '../../../utils/constants';
 import tooltipMixin from '../../mixins/tooltip_mixin';
+import { getGlTooltipDefaultContainer } from '../../../directives/tooltip/container';
 
 const tooltipRefName = 'bvTooltip';
 
@@ -15,6 +16,7 @@ export default {
   mixins: [tooltipMixin(tooltipRefName)],
   inheritAttrs: false,
   tooltipRefName,
+  getGlTooltipDefaultContainer,
 };
 </script>
 
@@ -22,6 +24,7 @@ export default {
   <b-tooltip
     :ref="$options.tooltipRefName"
     v-bind="$attrs"
+    :container="$attrs.container || $options.getGlTooltipDefaultContainer()"
     :delay="$options.tooltipDelay"
     v-on="$listeners"
   >

package/src/components/charts/area/area.vue

@@ -186,18 +186,7 @@ export default {
       return generateAnnotationSeries(this.annotations);
     },
     options() {
-      const defaultAreaChartOptions = {
-        xAxis: {
-          axisPointer: {
-            show: true,
-            lineStyle: {
-              type: 'solid',
-            },
-            label: {
-              formatter: this.formatTooltipText,
-            },
-          },
-        },
+      const areaChartOptions = {
         yAxis: {
           axisTick: {
             show: false,
@@ -207,10 +196,25 @@ export default {
           show: false,
         },
       };
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText,
+            },
+          },
+        },
+      };
+
       const mergedOptions = merge(
         {},
         defaultChartOptions,
-        defaultAreaChartOptions,
+        areaChartOptions,
+        this.formatTooltipText ? deprecatedTooltipFormatterOptions : {},
         this.option,
         dataZoomAdjustments(this.option.dataZoom)
       );

package/src/components/charts/line/line.vue

@@ -180,14 +180,8 @@ export default {
       return generateAnnotationSeries(this.annotations);
     },
     options() {
-      const defaultLineChartOptions = {
+      const lineChartOptions = {
         xAxis: {
-          axisPointer: {
-            show: true,
-            label: {
-              formatter: this.formatTooltipText,
-            },
-          },
           axisTick: {
             alignWithLabel: true,
             show: true,
@@ -200,10 +194,25 @@ export default {
           show: false,
         },
       };
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText,
+            },
+          },
+        },
+      };
+
       const mergedOptions = merge(
         {},
         defaultChartOptions,
-        defaultLineChartOptions,
+        lineChartOptions,
+        this.formatTooltipText ? deprecatedTooltipFormatterOptions : {},
         this.option,
         dataZoomAdjustments(this.option.dataZoom)
       );

package/src/components/charts/stacked_column/stacked_column.vue

@@ -192,46 +192,58 @@ export default {
       return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
     },
     options() {
-      const mergedOptions = merge(
-        {},
-        defaultChartOptions,
-        {
-          grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
-          xAxis: {
-            boundaryGap: true,
-            axisLabel: {
-              margin: 20,
-              verticalAlign: 'bottom',
-            },
-            axisLine: {
-              show: false,
-            },
-            axisPointer: {
-              show: true,
-              type: 'none',
-              label: {
-                formatter: this.formatTooltipText,
-              },
-            },
-            data: this.groupBy,
-            name: this.xAxisTitle,
-            type: this.xAxisType,
+      const stackedColumnChartOptions = {
+        grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
+        xAxis: {
+          boundaryGap: true,
+          axisLabel: {
+            margin: 20,
+            verticalAlign: 'bottom',
           },
-          yAxis: [
-            {
-              ...yAxisDefaults,
-              name: this.yAxisTitle,
-            },
-            {
-              ...yAxisDefaults,
-              name: this.secondaryDataTitle,
-              show: this.hasSecondaryAxis,
-            },
-          ],
-          legend: {
+          axisLine: {
             show: false,
           },
+          axisPointer: {
+            type: 'none',
+          },
+          data: this.groupBy,
+          name: this.xAxisTitle,
+          type: this.xAxisType,
+        },
+        yAxis: [
+          {
+            ...yAxisDefaults,
+            name: this.yAxisTitle,
+          },
+          {
+            ...yAxisDefaults,
+            name: this.secondaryDataTitle,
+            show: this.hasSecondaryAxis,
+          },
+        ],
+        legend: {
+          show: false,
+        },
+      };
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText,
+            },
+          },
         },
+      };
+
+      const mergedOptions = merge(
+        {},
+        defaultChartOptions,
+        stackedColumnChartOptions,
+        this.formatTooltipText ? deprecatedTooltipFormatterOptions : {},
         this.option,
         dataZoomAdjustments(this.option.dataZoom)
       );

package/src/components/shared_components/clear_icon_button/clear_icon_button.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlButton from '../../base/button/button.vue';
 import { translate } from '../../../utils/i18n';
 

package/src/components/utilities/truncate/truncate.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { POSITION, ZERO_WIDTH_SPACE } from './constants';
 

package/src/directives/tooltip/container.js

@@ -0,0 +1,7 @@
+let containerSelector;
+
+export const setGlTooltipDefaultContainer = (selector) => {
+  containerSelector = selector;
+};
+
+export const getGlTooltipDefaultContainer = () => containerSelector;

package/src/directives/tooltip/tooltip.js

@@ -0,0 +1,22 @@
+import { VBTooltip } from '../../vendor/bootstrap-vue/src/directives/tooltip';
+import { getGlTooltipDefaultContainer } from './container';
+
+const patchHook = (hook) => (el, bindings, vnode) => {
+  hook(
+    el,
+    {
+      ...bindings,
+      arg: bindings.arg || getGlTooltipDefaultContainer(),
+    },
+    vnode
+  );
+};
+
+const bind = patchHook(VBTooltip.bind);
+const componentUpdated = patchHook(VBTooltip.componentUpdated);
+
+export const GlTooltipDirective = {
+  ...VBTooltip,
+  bind,
+  componentUpdated,
+};

package/src/index.js

@@ -120,7 +120,8 @@ export { default as GlTruncateText } from './components/utilities/truncate_text/
 
 // Directives
 export { GlModalDirective } from './directives/modal';
-export { GlTooltipDirective } from './directives/tooltip';
+export { GlTooltipDirective } from './directives/tooltip/tooltip';
+export { setGlTooltipDefaultContainer } from './directives/tooltip/container';
 export { GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
 export { GlCollapseToggleDirective } from './directives/collapse_toggle';
 export { SafeLinkDirective as GlSafeLinkDirective } from './directives/safe_link/safe_link';

package/src/tokens/tokens_story.vue

@@ -1,6 +1,6 @@
 <script>
 import { colorFromBackground } from '../utils/utils';
-import { GlTooltipDirective } from '../directives/tooltip';
+import { GlTooltipDirective } from '../directives/tooltip/tooltip';
 import GlBadge from '../components/base/badge/badge.vue';
 import GlColorContrast from '../internal/color_contrast/color_contrast.vue';
 

package/src/tokens/tokens_table.vue

@@ -7,7 +7,7 @@ import GlSearchBoxByType from '../components/base/search_box_by_type/search_box_
 import GlLink from '../components/base/link/link.vue';
 import GlTable from '../components/base/table/table.vue';
 import GlPagination from '../components/base/pagination/pagination.vue';
-import { GlTooltipDirective } from '../directives/tooltip';
+import { GlTooltipDirective } from '../directives/tooltip/tooltip';
 import TOKENS_DEFAULT from './build/json/tokens.json';
 import TOKENS_DARK from './build/json/tokens.dark.json';
 

package/src/utils/charts/config.js

@@ -42,6 +42,9 @@ export const grid = {
   right: 32,
 };
 
+/**
+ * Options for charts where the y-axis is the metrics axis.
+ */
 export const defaultChartOptions = {
   grid,
   xAxis,

package/dist/directives/tooltip.js

@@ -1 +0,0 @@
-export { VBTooltip as GlTooltipDirective } from '../vendor/bootstrap-vue/src/directives/tooltip/tooltip';

package/src/directives/tooltip.js

@@ -1 +0,0 @@
-export { VBTooltip as GlTooltipDirective } from '../vendor/bootstrap-vue/src/directives/tooltip/tooltip';