@gitlab/ui 69.0.0 → 70.0.0

package/dist/utils/charts/constants.js

@@ -17,13 +17,6 @@ const ANNOTATIONS_SERIES_NAME = 'annotations';
  */
 const ANNOTATIONS_COMPONENT_TYPE = 'markPoint';
 
-/**
- * This is so that the mouse doesn't go over the
- * tooltip and call mouseout which will hide the
- * tooltip.
- */
-const ANNOTATION_TOOLTIP_TOP_OFFSET = 10;
-
 /**
  * This is a slight offset that gets applied to the left
  * of the chart tooltips to ensure a correct position.
@@ -31,11 +24,10 @@ const ANNOTATION_TOOLTIP_TOP_OFFSET = 10;
 const TOOLTIP_LEFT_OFFSET = 2;
 
 /**
- * This is an offset that gets applied between the mouse
- * cursor and the left of the chart data tooltips to provide
- * some spacing.
+ * This is a slight offset that gets applied to the left
+ * of the chart tooltips to ensure a correct position.
  */
-const DATA_TOOLTIP_LEFT_OFFSET = 10;
+const TOOLTIP_TOP_OFFSET = 10;
 
 /**
  * These are the accepted values for the layout prop
@@ -68,4 +60,4 @@ const CHART_TYPE_LINE = 'line';
 const HEIGHT_AUTO_CLASSES = 'gl-chart-h-auto gl-display-flex gl-flex-direction-column gl-h-full';
 const HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES = 'gl-display-flex gl-h-full';
 
-export { ANNOTATIONS_COMPONENT_TYPE, ANNOTATIONS_SERIES_NAME, ANNOTATION_TOOLTIP_TOP_OFFSET, CHART_TYPE_BAR, CHART_TYPE_LINE, DATA_TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES, HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES, LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, TOOLTIP_LEFT_OFFSET, arrowSymbol };
+export { ANNOTATIONS_COMPONENT_TYPE, ANNOTATIONS_SERIES_NAME, CHART_TYPE_BAR, CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES, HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES, LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET, arrowSymbol };

package/dist/utils/charts/theme.js

@@ -2,8 +2,7 @@ import { GRAY_600, GRAY_200, GRAY_50, GRAY_300, GRAY_100, DATA_VIZ_BLUE_200, DAT
 import { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 
-const glBorderRadiusBase = '0.25rem';
-
+const GL_BORDER_RADIUS_BASE = '0.25rem';
 const themeName = 'gitlab';
 const heatmapHues = [GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800];
 const gaugeNeutralHues = [GRAY_900, GRAY_500];
@@ -128,7 +127,7 @@ const createTheme = function () {
           borderWidth: 0,
           color: GRAY_900,
           textBackgroundColor: WHITE,
-          textBorderRadius: glBorderRadiusBase,
+          textBorderRadius: GL_BORDER_RADIUS_BASE,
           textPadding: [8, 12]
         }
       },

package/dist/utils/constants.js

@@ -1,7 +1,5 @@
 import { POSITION } from '../components/utilities/truncate/constants';
 
-const glIconSizes = '8 12 14 16 24 32 48 72';
-
 function appendDefaultOption(options) {
   return {
     ...options,
@@ -131,7 +129,7 @@ const datepickerWidthOptionsMap = {
 };
 
 // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
-const iconSizeOptions = glIconSizes.split(' ').map(Number);
+const iconSizeOptions = [8, 12, 14, 16, 24, 32, 48, 72];
 const triggerVariantOptions = {
   click: 'click',
   hover: 'hover',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "69.0.0",
+  "version": "70.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,27 +17,25 @@
   "files": [
     "src",
     "dist",
-    "scss_to_js",
     "translations.json"
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
-    "prebuild": "run-s build-tokens build-scss-variables generate-utilities",
-    "prepare": "run-s build-tokens build-scss-variables generate-utilities",
+    "prebuild": "run-s build-tokens generate-utilities",
+    "prepare": "run-s build-tokens generate-utilities",
     "generate-utilities": "make src/scss/utilities.scss",
     "copy-fonts": "make copy-fonts",
-    "build-scss-variables": "make scss_to_js/scss_variables.js",
     "build-tokens": "node ./bin/build_tokens.js",
-    "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
+    "clean": "rm -r dist storybook src/scss/utilities.scss",
     "cy:a11y": "cypress run --browser chrome --env grepTags=@a11y",
     "cy:edge": "cypress run --browser edge --env grepTags=-@a11y",
     "cy:run": "cypress run --browser firefox --env grepTags=-@a11y",
     "start": "yarn storybook",
     "storybook": "yarn storybook-prep && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
     "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
-    "storybook-prep": "run-s copy-fonts build-tokens generate-utilities build-scss-variables",
+    "storybook-prep": "run-s copy-fonts build-tokens generate-utilities",
     "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
-    "pretest:unit": "yarn build-tokens build-scss-variables",
+    "pretest:unit": "yarn build-tokens",
     "test": "run-s test:unit test:visual",
     "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html 'yarn cy:run && yarn cy:a11y'",
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
@@ -124,12 +122,12 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.5.0",
+    "cypress": "13.5.1",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.53.0",
+    "eslint": "8.54.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-storybook": "0.6.15",

package/src/components/charts/area/area.spec.js

@@ -136,30 +136,13 @@ describe('area component', () => {
     });
   });
 
-  describe('tooltip position', () => {
-    const dataTooltipTitle = 'FooBar';
-
+  describe('data tooltip is set', () => {
     beforeEach(() => {
       createShallowWrapper();
     });
 
     it('is initialized', () => {
-      expect(findDataTooltip().props('left')).toBe('0');
-      expect(findDataTooltip().props('top')).toBe('0');
-      expect(findDataTooltip().text()).not.toContain(dataTooltipTitle);
-    });
-
-    it('is reset when mouse moves', async () => {
-      const left = '10px';
-      const top = '30px';
-
-      wrapper.setData({ dataTooltipPosition: { left, top }, dataTooltipTitle });
-
-      await nextTick();
-
-      expect(findDataTooltip().props('left')).toBe(`${left}`);
-      expect(findDataTooltip().props('top')).toBe(`${top}`);
-      expect(findDataTooltip().text()).toContain(dataTooltipTitle);
+      expect(findDataTooltip().exists()).toBe(true);
     });
   });
 

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

@@ -30,8 +30,6 @@ import {
   getDefaultTooltipContent,
 } from '../../../utils/charts/config';
 import {
-  ANNOTATION_TOOLTIP_TOP_OFFSET,
-  DATA_TOOLTIP_LEFT_OFFSET,
   LEGEND_LAYOUT_INLINE,
   LEGEND_LAYOUT_TABLE,
   LEGEND_AVERAGE_TEXT,
@@ -42,7 +40,6 @@ import {
 } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
-import { debounceByAnimationFrame } from '../../../utils/utils';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
@@ -141,13 +138,8 @@ export default {
     // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
     return {
       chart: null,
-      showDataTooltip: false,
       dataTooltipTitle: '',
       dataTooltipContent: {},
-      dataTooltipPosition: {
-        left: '0',
-        top: '0',
-      },
       showAnnotationsTooltip: false,
       annotationsTooltipTitle: '',
       annotationsTooltipContent: '',
@@ -155,7 +147,6 @@ export default {
         left: '0',
         top: '0',
       },
-      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText,
     };
   },
@@ -269,9 +260,6 @@ export default {
     },
   },
   beforeDestroy() {
-    this.chart.getZr().off('mousemove', this.debouncedShowHideTooltip);
-    this.chart.getZr().off('mouseout', this.debouncedShowHideTooltip);
-
     this.chart.off('mouseout', this.hideAnnotationsTooltip);
     this.chart.off('mouseover', this.onChartMouseOver);
   },
@@ -289,13 +277,6 @@ export default {
       };
     },
     onCreated(chart) {
-      // These listeners are used to show/hide data tooltips
-      // when the mouse is hovered over the parent container
-      // of echarts' svg element. This works only for data points
-      // and not markPoints.
-      chart.getZr().on('mousemove', this.debouncedShowHideTooltip);
-      chart.getZr().on('mouseout', this.debouncedShowHideTooltip);
-
       // eCharts inbuild mouse events
       // https://echarts.apache.org/en/api.html#events.Mouse%20events
       // is used to attach listeners to markPoints. These listeners
@@ -305,7 +286,6 @@ export default {
       // sections of the charts with their own mouseovers and mouseouts,
       // there shouldn't be an overlapping situation where both tooltips
       // are visible.
-
       if (this.hasAnnotations) {
         chart.on('mouseout', this.onChartDataPointMouseOut);
         chart.on('mouseover', this.onChartDataPointMouseOver);
@@ -314,14 +294,6 @@ export default {
       this.chart = chart;
       this.$emit('created', chart);
     },
-    showHideTooltip({ event: mouseEvent }) {
-      this.showDataTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
-
-      this.dataTooltipPosition = {
-        left: `${mouseEvent.zrX + DATA_TOOLTIP_LEFT_OFFSET}px`,
-        top: `${mouseEvent.zrY}px`,
-      };
-    },
     onChartDataPointMouseOut() {
       this.showAnnotationsTooltip = false;
     },
@@ -340,7 +312,7 @@ export default {
         this.annotationsTooltipContent = content;
         this.annotationsTooltipPosition = {
           left: `${event.event.zrX}px`,
-          top: `${event.event.zrY + ANNOTATION_TOOLTIP_TOP_OFFSET}px`,
+          top: `${event.event.zrY}px`,
         };
       }
     },
@@ -367,9 +339,9 @@ export default {
       id="annotationsTooltip"
       ref="annotationsTooltip"
       :show="showAnnotationsTooltip"
-      :chart="chart"
       :top="annotationsTooltipPosition.top"
       :left="annotationsTooltipPosition.left"
+      :chart="chart"
       placement="bottom"
     >
       <template #title>
@@ -377,16 +349,7 @@ export default {
       </template>
       <div>{{ annotationsTooltipContent }}</div>
     </chart-tooltip>
-    <chart-tooltip
-      v-if="chart"
-      id="dataTooltip"
-      ref="dataTooltip"
-      class="gl-pointer-events-none"
-      :show="showDataTooltip"
-      :chart="chart"
-      :top="dataTooltipPosition.top"
-      :left="dataTooltipPosition.left"
-    >
+    <chart-tooltip v-if="chart" ref="dataTooltip" :chart="chart">
       <template #title>
         <slot v-if="formatTooltipText" name="tooltip-title"></slot>
         <template v-else>

package/src/components/charts/bar/bar.vue

@@ -3,7 +3,7 @@
 import merge from 'lodash/merge';
 import truncate from 'lodash/truncate';
 import { grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
-import { TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba, debounceByAnimationFrame } from '../../../utils/utils';
@@ -182,7 +182,7 @@ export default {
   methods: {
     moveShowTooltip({ event: mouseEvent }) {
       this.tooltipPosition = {
-        left: `${mouseEvent.zrX + TOOLTIP_LEFT_OFFSET}px`,
+        left: `${mouseEvent.zrX}px`,
         top: `${mouseEvent.zrY}px`,
       };
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);

package/src/components/charts/column/column.vue

@@ -12,11 +12,7 @@ import {
   generateBarSeries,
   generateLineSeries,
 } from '../../../utils/charts/config';
-import {
-  TOOLTIP_LEFT_OFFSET,
-  CHART_TYPE_LINE,
-  HEIGHT_AUTO_CLASSES,
-} from '../../../utils/charts/constants';
+import { CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import { debounceByAnimationFrame } from '../../../utils/utils';
@@ -192,7 +188,7 @@ export default {
   methods: {
     moveShowTooltip(mouseEvent) {
       this.tooltipPosition = {
-        left: `${mouseEvent.zrX + TOOLTIP_LEFT_OFFSET}px`,
+        left: `${mouseEvent.zrX}px`,
         top: `${mouseEvent.zrY}px`,
       };
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -173,6 +173,7 @@ export default {
       if (data.length) {
         const [left, top] = this.chart.convertToPixel('grid', data);
 
+        this.showTooltip = true;
         this.tooltipPosition = {
           left: `${left}px`,
           top: `${top}px`,

package/src/components/charts/heatmap/heatmap.spec.js

@@ -1,6 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
 
-import { TOOLTIP_LEFT_OFFSET } from '~/utils/charts/constants';
 import { createMockChartInstance } from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
@@ -71,7 +70,7 @@ describe('heatmap component', () => {
       return wrapper.vm.$nextTick(() => {
         expect(mockChartInstance.convertToPixel).toHaveBeenCalledWith({ seriesId }, value);
 
-        expect(findChartTooltip().props('left')).toBe(`${pixel[0] + TOOLTIP_LEFT_OFFSET}px`);
+        expect(findChartTooltip().props('left')).toBe(`${pixel[0]}px`);
         expect(findChartTooltip().props('top')).toBe(`${pixel[1]}px`);
       });
     });

package/src/components/charts/heatmap/heatmap.vue

@@ -3,7 +3,7 @@
 import merge from 'lodash/merge';
 import { WHITE, GRAY_100 } from '../../../../dist/tokens/js/tokens';
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
-import { TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
@@ -255,7 +255,7 @@ export default {
 
         this.tooltip = {
           ...this.tooltip,
-          left: `${left + TOOLTIP_LEFT_OFFSET}px`,
+          left: `${left}px`,
           top: `${top}px`,
         };
       }

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

@@ -33,8 +33,6 @@ import {
   getDefaultTooltipContent,
 } from '../../../utils/charts/config';
 import {
-  ANNOTATION_TOOLTIP_TOP_OFFSET,
-  DATA_TOOLTIP_LEFT_OFFSET,
   LEGEND_LAYOUT_INLINE,
   LEGEND_LAYOUT_TABLE,
   LEGEND_AVERAGE_TEXT,
@@ -313,7 +311,7 @@ export default {
       this.showDataTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
 
       this.dataTooltipPosition = {
-        left: `${mouseEvent.zrX + DATA_TOOLTIP_LEFT_OFFSET}px`,
+        left: `${mouseEvent.zrX}px`,
         top: `${mouseEvent.zrY}px`,
       };
     },
@@ -335,7 +333,7 @@ export default {
         this.annotationsTooltipContent = content;
         this.annotationsTooltipPosition = {
           left: `${event.event.zrX}px`,
-          top: `${event.event.zrY + ANNOTATION_TOOLTIP_TOP_OFFSET}px`,
+          top: `${event.event.zrY}px`,
         };
       }
     },

package/src/components/charts/sparkline/sparkline.spec.js

@@ -128,25 +128,25 @@ describe('sparkline chart component', () => {
   });
 
   it('shows the tooltip when mousing over an axis point in the component', async () => {
-    expect(getTooltip().attributes('show')).toBe(undefined);
+    expect(getTooltip().props('show')).toBe(false);
 
     const mockData = { seriesData: [{ data: [5, 8] }] };
     getXAxisLabelFormatter()(mockData);
 
     await wrapper.vm.$nextTick();
-    expect(getTooltip().attributes('show')).toBe('true');
+    expect(getTooltip().props('show')).toBe(true);
   });
 
   it('hides the tooltip when the mouse leaves the component', async () => {
     wrapper.setData({ tooltip: { show: true } });
     await wrapper.vm.$nextTick();
 
-    expect(getTooltip().attributes('show')).toBe('true');
+    expect(getTooltip().props('show')).toBe(true);
 
     wrapper.trigger('mouseleave');
     await wrapper.vm.$nextTick();
 
-    expect(getTooltip().attributes('show')).toBe(undefined);
+    expect(getTooltip().props('show')).toBe(false);
   });
 
   it.each`
@@ -156,13 +156,13 @@ describe('sparkline chart component', () => {
     ${undefined} | ${0}
     ${-10}       | ${undefined}
   `(`hides the tooltip when seriesData = ($label, $content)`, async ({ label, content }) => {
-    expect(getTooltip().attributes('show')).toBe(undefined);
+    expect(getTooltip().props('show')).toBe(false);
 
     const mockData = { seriesData: [{ data: [label, content] }] };
     getXAxisLabelFormatter()(mockData);
 
     await wrapper.vm.$nextTick();
-    expect(getTooltip().attributes('show')).toBe(undefined);
+    expect(getTooltip().props('show')).toBe(false);
   });
 
   it('adds the right content to the tooltip', async () => {

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

@@ -18,7 +18,6 @@ import {
   LEGEND_MIN_TEXT,
   LEGEND_MAX_TEXT,
   CHART_TYPE_LINE,
-  ANNOTATION_TOOLTIP_TOP_OFFSET,
   HEIGHT_AUTO_CLASSES,
 } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
@@ -271,7 +270,7 @@ export default {
     moveShowTooltip({ event: mouseEvent }) {
       this.tooltipPosition = {
         left: `${mouseEvent.zrX}px`,
-        top: `${mouseEvent.zrY + ANNOTATION_TOOLTIP_TOP_OFFSET}px`,
+        top: `${mouseEvent.zrY}px`,
       };
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },

package/src/components/charts/tooltip/tooltip.spec.js

@@ -2,6 +2,8 @@ import { shallowMount } from '@vue/test-utils';
 import { createMockChartInstance } from '~helpers/chart_stubs';
 import GlPopover from '../../base/popover/popover.vue';
 import { popoverPlacements } from '../../../utils/constants';
+import { waitForAnimationFrame } from '../../../utils/test_utils';
+
 import ChartTooltip from './tooltip.vue';
 
 let mockChartInstance;
@@ -12,31 +14,176 @@ jest.mock('echarts', () => ({
 
 describe('ChartTooltip', () => {
   let wrapper;
+  let mockContainPixel;
+
+  const findPopover = () => wrapper.findComponent(GlPopover);
+  const findPopoverTarget = () => wrapper.find(`#${findPopover().attributes('target')}`);
+  const getPopoverTargetStyle = (name) => findPopoverTarget().element.style.getPropertyValue(name);
 
-  const findGlPopover = () => wrapper.findComponent(GlPopover);
+  const getMouseHandler = () => mockChartInstance.getZr().on.mock.calls[0][1];
+  const triggerMouseHandler = async (event) => {
+    getMouseHandler()({ event });
+    await waitForAnimationFrame();
+  };
 
-  const createWrapper = (props = {}) => {
-    mockChartInstance = createMockChartInstance();
+  const createWrapper = (props = {}, ...options) => {
+    mockChartInstance = {
+      ...createMockChartInstance(),
+      containPixel: mockContainPixel,
+    };
     wrapper = shallowMount(ChartTooltip, {
       propsData: {
         chart: mockChartInstance,
         ...props,
       },
+      ...options,
     });
   };
 
-  describe('GlPopover', () => {
-    it('is right-positioned by default', () => {
-      createWrapper();
+  beforeEach(() => {
+    mockContainPixel = jest.fn();
+  });
+
+  it('sets target as container instead of a trigger', () => {
+    createWrapper();
+
+    expect(findPopover().props('triggers')).toBe('');
+    expect(findPopover().props('container')).toEqual(findPopover().props('target'));
+
+    expect(findPopoverTarget().exists()).toBe(true);
+  });
+
+  it('is right-positioned by default', () => {
+    createWrapper();
+
+    expect(findPopover().props('placement')).toBe(popoverPlacements.right);
+  });
+
+  it('applies placement if any', () => {
+    createWrapper({ placement: popoverPlacements.bottom });
+
+    expect(findPopover().props('placement')).toBe(popoverPlacements.bottom);
+  });
+
+  it('applies initial position and updates it', async () => {
+    createWrapper({ show: true, left: '0', top: '50%' });
+
+    expect(findPopover().attributes('show')).toBe('true');
+    expect(getPopoverTargetStyle('left')).toBe('0px');
+    expect(getPopoverTargetStyle('top')).toBe('50%');
+
+    wrapper.setProps({ left: '100px', top: '200px' });
+
+    await waitForAnimationFrame();
+
+    expect(findPopover().attributes('show')).toBe('true');
+    expect(getPopoverTargetStyle('left')).toBe('100px');
+    expect(getPopoverTargetStyle('top')).toBe('200px');
+  });
+
+  it('reacts to `mousemove` and `mouseout` in chart dom', () => {
+    createWrapper();
+
+    const zr = mockChartInstance.getZr();
+    const handler = getMouseHandler();
+
+    expect(zr.on).toHaveBeenCalledWith('mousemove', handler);
+    expect(zr.on).toHaveBeenCalledWith('mouseout', handler);
+  });
+
+  it('tooltip target has default offset', () => {
+    createWrapper();
+
+    expect(getPopoverTargetStyle('margin-top')).toBe('-10px');
+    expect(getPopoverTargetStyle('height')).toBe('20px');
 
-      expect(findGlPopover().props('placement')).toBe(popoverPlacements.right);
+    expect(getPopoverTargetStyle('margin-left')).toBe('-2px');
+    expect(getPopoverTargetStyle('width')).toBe('4px');
+  });
+
+  it('tooltip target defines offsets', () => {
+    const xOffset = 7;
+    const yOffset = 12;
+
+    createWrapper({
+      xOffset,
+      yOffset,
+    });
+
+    expect(getPopoverTargetStyle('margin-top')).toBe('-12px');
+    expect(getPopoverTargetStyle('height')).toBe('24px');
+
+    expect(getPopoverTargetStyle('margin-left')).toBe('-7px');
+    expect(getPopoverTargetStyle('width')).toBe('14px');
+  });
+
+  describe('when setting a `show` value', () => {
+    it('applies initial `show` value and updates it', async () => {
+      createWrapper({ show: true });
+
+      expect(findPopover().attributes('show')).toBe('true');
+
+      wrapper.setProps({ show: false });
+      await waitForAnimationFrame();
+
+      expect(findPopover().attributes('show')).toBe(undefined);
+    });
+  });
+
+  describe('when not setting a `show` value', () => {
+    describe('with no position defined', () => {
+      beforeEach(() => {
+        createWrapper();
+      });
+
+      it('when mouse moves outside of chart', async () => {
+        mockContainPixel.mockReturnValueOnce(false);
+
+        await triggerMouseHandler({ zrX: 1, zrY: 2.3 });
+
+        expect(mockContainPixel).toHaveBeenCalledWith('grid', [1, 2]);
+
+        expect(findPopover().attributes('show')).toBe(undefined);
+      });
+
+      it('when mouse moves inside chart', async () => {
+        mockContainPixel.mockReturnValueOnce(true);
+
+        await triggerMouseHandler({ zrX: 3, zrY: 4.3 });
+
+        expect(mockContainPixel).toHaveBeenCalledWith('grid', [3, 4]);
+
+        expect(findPopover().attributes('show')).toBe('true');
+        expect(getPopoverTargetStyle('left')).toBe('3px');
+        expect(getPopoverTargetStyle('top')).toBe('4px');
+      });
     });
 
-    it('applies passed placement if any', () => {
-      const placement = popoverPlacements.bottom;
-      createWrapper({ placement });
+    describe('with position defined', () => {
+      beforeEach(() => {
+        createWrapper({ right: '50px', bottom: '100px' });
+      });
+
+      it('when mouse moves outside of chart', async () => {
+        mockContainPixel.mockReturnValueOnce(false);
+        await triggerMouseHandler({ zrX: 1, zrY: 2.3 });
+
+        expect(mockContainPixel).toHaveBeenCalledWith('grid', [1, 2]);
+        expect(findPopover().attributes('show')).toBe(undefined);
+      });
+
+      it('when mouse moves inside chart', async () => {
+        mockContainPixel.mockReturnValueOnce(true);
+        await triggerMouseHandler({ zrX: 3, zrY: 4.3 });
+
+        expect(mockContainPixel).toHaveBeenCalledWith('grid', [3, 4]);
+        expect(findPopover().attributes('show')).toBe('true');
 
-      expect(findGlPopover().props('placement')).toBe(placement);
+        expect(getPopoverTargetStyle('left')).toBe('');
+        expect(getPopoverTargetStyle('top')).toBe('');
+        expect(getPopoverTargetStyle('right')).toBe('50px');
+        expect(getPopoverTargetStyle('bottom')).toBe('100px');
+      });
     });
   });
 });