如何在G2Plot折线图中调整提示框（Tooltip）的位置

g2plot官网http://g2plot-v1.antv.vision/zh/examples/line

1. 使用domStyles属性调整CSS样式

第一种方法是通过domStyles属性直接修改Tooltip的CSS样式。这种方法允许你使用CSS的transform属性来移动Tooltip的位置，并可以添加平滑的动画效果。

import { Line } from '@antv/g2plot';

const linePlot = new Line('container', {
  data: [
    // 数据示例
    { date: '2023-01-01', value: 10 },
    { date: '2023-01-02', value: 20 },
    // 更多数据...
  ],
  xField: 'date',
  yField: 'value',
  tooltip: {
    title: 'title',
    domStyles: {
      'g2-tooltip': {
      /* width: '200px',
         height: '300px',*/
        transform: 'translateY(-150px)', // 向上移动150像素
        transition: 'transform 0.3s ease-in-out'  // 添加平滑动画效果
      }
    }
  }
});

linePlot.render();

在这个例子中，domStyles属性被用来设置Tooltip的CSS样式。通过给g2-tooltip类添加transform: translateY(-150px)，我们实现了将Tooltip向上移动150像素的效果。同时，transition: transform 0.3s ease-in-out确保了移动过程具有平滑的动画效果。

2. 使用offset属性调整偏移量

第二种方法是通过offset属性直接设置Tooltip的偏移量。这种方法更加直观和简单，适用于不需要复杂CSS样式调整的情况。

import { Line } from '@antv/g2plot';

const linePlot = new Line('container', {
  data: [
    // 数据示例
    { date: '2023-01-01', value: 10 },
    { date: '2023-01-02', value: 20 },
    // 更多数据...
  ],
  xField: 'date',
  yField: 'value',
  tooltip: {
    title: 'title',
    offset: 150, // 向上偏移150像素
  }
});

linePlot.render();

在这个例子中，offset属性被设置为150，这意味着Tooltip将向上偏移150像素。