material ui Tooltip 距锚点的距离

Question

是否有一种清晰/简单的方法来控制工具提示与锚元素的距离？默认定位不适合我的情况，工具提示太靠近锚点。我已经检查了它的所有道具，但PopperProps没有可见的选项可以做到这一点。

Answer 1

使用 Material UI v5，可以这样做：

<Tooltip
  PopperProps={{
    modifiers: [
      {
        name: "offset",
        options: {
          offset: [50, 0],
        },
      },
    ],
  }}
>

Answer 2

您可以使用withStyles自定义工具提示的边距。

在我的情况下（Material-UI 3），工具提示离锚点太远了。
这是我需要的：

const StyledTooltip = withStyles({
  tooltipPlacementTop: {
    margin: "4px 0",
  },
})(Tooltip);

我的目标tooltipPlacementTop是因为它是使用placement="top"道具时的规则名称。
您可以在Tooltip API 文档中找到合适的规则名称。

最后提示：我使用PopperProps={{ keepMounted: true }}道具在导航器的检查器中查看应用到工具提示的 CSS。

希望能帮助到你。

Answer 3

遵循 Hugo 的建议，由于工具提示位置是绝对的，我没有更改边距，而是通过调整属性right和top来更改锚点位置，如下所示：

const StyledTooltip = withStyles({
  tooltipPlacementTop: {
    right: "1px",
    top: "8px",
  },
})(Tooltip);

它按我的预期工作。您可以使用向左或向右相应地调整工具提示的水平位置。