材质 ui 工具提示距锚点的距离答案

【问题标题】：material ui Tooltip distance from the anchor材质 ui 工具提示距锚点的距离
【发布时间】：2019-12-23 18:02:36
【问题描述】：

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

【问题讨论】：

【解决方案1】：

您可以通过增加工具提示的 margin-top 来使用 CSS 来处理它。

您可以像示例 here 那样在 React 中执行此操作

或者您在这样的 CSS 文件中执行此操作：

 .MuiTooltip-popper {
    margin-top: 10px;
}

【讨论】：

【解决方案2】：

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

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

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

我以tooltipPlacementTop 为目标，因为它是使用placement="top" 属性时的规则名称。
您可以在Tooltip API documentation 中找到适当的规则名称。

最后一个提示：我使用 PopperProps={{ keepMounted: true }} 属性在导航器的检查器中查看了哪些 CSS 应用于工具提示。

希望对你有帮助。

【讨论】：

【解决方案3】：

按照 Hugo 的建议，由于工具提示位置是绝对的，我没有更改 margin，而是通过调整属性 right 和 top 来更改锚点位置 像这样：

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

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

【讨论】：