Question

是否存在一种清晰/简便的方法来控制Tooltip与锚元素的距离？默认位置不适用于我的情况，工具提示离锚点太近。我已经检查了所有道具，panic: runtime error: invalid memory address or nil pointer dereference [signal SIGSEGV: segmentation violation code=0x1 addr=0x8 pc=0x9384f0] goroutine 1 [running]: github.com/hyperledger/fabric-sdk-go/pkg/client/channel.(*Client).Query(0x0, 0xce8db5, 0x5, 0xce9c7d, 0x6, 0xc0001b1bd0, 0x3, 0x3, 0x0, 0x0, ...) /home/batazor/.gvm/pkgsets/go1.12/global/pkg/mod/github.com/hyperledger/fabric-sdk-go@v1.0.0-alpha5/pkg/client/channel/chclient.go:97 +0xc0 main.(*FabricSetup).QueryHello(0xc000171eb0, 0x0, 0x0, 0x28, 0xc0001b0460) /home/batazor/.gvm/pkgsets/go1.12/global/src/github.com/batazor/hyperledger-fabric/cmd/hyperledger-fabric/example.go:10 +0x217 main.main() /home/batazor/.gvm/pkgsets/go1.12/global/src/github.com/batazor/hyperledger-fabric/cmd/hyperledger-fabric/main.go:43 +0x143没有明显的选择。

Answer 1

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

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

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

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

最后一个提示：我使用PopperProps={{ keepMounted: true }}道具在导航员的检查器中查看了对提示应用了什么CSS。

希望有帮助。

Answer 2

您可以通过增加工具提示的空白处来使用CSS进行处理。

您可以像示例here

一样在React中进行操作

或者您可以在CSS文件中这样做：

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

Answer 3

跟进 Hugo 的建议，因为工具提示位置是绝对的，而不是更改 margin 我通过调整属性 right 和 top 来更改锚点位置 像这样：

 tooltipPlacementTop: {
        right: "1px",
        top: "8px",
      }

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

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

3 个答案: