材料 UI 工具提示与定位点的距离

Question

有没有一种清晰/简单的方法来控制工具提示与锚元素的距离？默认位置不太适合我的情况，工具提示离锚点太近。我已经检查了它的所有道具，PopperProps没有可见的选项来执行此操作。

Answer 1

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

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

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

我定位tooltipPlacementTop因为它是使用placement="top"道具时的规则名称。
可以在工具提示 API 文档中找到适当的规则名称。

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

希望对您有所帮助。

Answer 2

对于 Material-UI V.5，它可以像这样完成：

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

Answer 3

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

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

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

Answer 4

在 Material-UI v4 中，您可以通过PopperProps中的 prop 添加stylemargin。

<Tooltip
placement="bottom"
title="hello"
PopperProps={{ style: { marginTop: -12 } }}
>
<div>Some text</div>
</Tooltip>

Answer 5

我正在使用样式化的材质 UI 来调整我的工具提示属性。我使用了 MUI 文档中提供的普通主题。

const LightTooltip = styled(({ className, ...props }) => (
<Tooltip {...props} classes={{ popper: className }} />))(({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11
},}));

我尝试使用 Mui 风格调整位置属性，但它不起作用。 我用我的外部样式表修复了它。

.MuiTooltip-popper {
inset: -25px auto 0px auto;}

Answer 6

我使用的是Material-UI 4.x版本，并使用以下样式更改了工具提示与锚点的距离

const HtmlTooltip = withStyles(theme => ({
arrow: {
'&::before': {
color: 'white'
}
},
tooltip: {
backgroundColor: '#f5f5f9',
boxShadow: theme.shadows[8],
color: 'rgba(0, 0, 0, 0.87)',
fontSize: 14,
maxWidth: 800,
padding: 0,
},
tooltipPlacementTop: { // this part will change the distance
margin: '4px 0', 
},
}))(Tooltip)

Answer 7

更改锚点和工具提示之间的距离很棘手。就我而言，我需要将默认边距从 14px 减少到 2 px。 这是我的代码。

MuiTooltip: {
styleOverrides: {
tooltip: ({ ownerState, theme }) => {
return ({
'&.MuiTooltip-tooltip': {
'&.MuiTooltip-tooltipPlacementBottom': {
marginTop: '2px',
},
'&.MuiTooltip-tooltipPlacementTop': {
marginBottom: '2px',
},
'&.MuiTooltip-tooltipPlacementLeft': {
marginRight: '2px',
},
'&.MuiTooltip-tooltipPlacementRight': {
marginLeft: '2px',
},
},
});
},
},
},

Answer 8

你可以通过样式道具进行设置

<Tooltip style={{ padding: '4px 0'}} > {children} </Tooltip>