admin管理员组文章数量:1326474
I use material-ui with react in my project. What I want to do is to simply change the tooltip (each tooltip contains an Icon) when certain condition is met.
ToolTipWrapper.js
import React from "react";
import { Tooltip } from "@material-ui/core";
import { CheckCircle, Error } from "@material-ui/icons";
import { green, deepOrange } from "@material-ui/core/colors";
class TooltipWrapper extends React.Component {
render() {
return this.props.error.length === 0 ? (
<Tooltip title="meet all requirements" placement="bottom-start">
<CheckCircle style={{ color: green[400] }} />
</Tooltip>
) : (
<Tooltip title="Not meet all requirements" placement="bottom-start">
<Error style={{ color: deepOrange[400] }} />
</Tooltip>
);
}
}
export default TooltipWrapper;
index.js
import React from "react";
import { render } from "react-dom";
import TooltipWrapper from "./TooltipWrapper.js";
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
error: []
};
}
handleClick = () => {
this.setState({
error: [123]
});
};
render() {
return (
<div style={styles}>
<TooltipWrapper error={this.state.error} />
<button onClick={this.handleClick}>change</button>
</div>
);
}
}
render(<App />, document.getElementById("root"));
Please check this demo in codesandbox:demo link
Now the problem is that the second tooltip will not show as expected after changing from the first tooltip by clicking the button. The position of the second tooltip magically moved to the top left, which is quite strange.
Thanks for your help.
I use material-ui with react in my project. What I want to do is to simply change the tooltip (each tooltip contains an Icon) when certain condition is met.
ToolTipWrapper.js
import React from "react";
import { Tooltip } from "@material-ui/core";
import { CheckCircle, Error } from "@material-ui/icons";
import { green, deepOrange } from "@material-ui/core/colors";
class TooltipWrapper extends React.Component {
render() {
return this.props.error.length === 0 ? (
<Tooltip title="meet all requirements" placement="bottom-start">
<CheckCircle style={{ color: green[400] }} />
</Tooltip>
) : (
<Tooltip title="Not meet all requirements" placement="bottom-start">
<Error style={{ color: deepOrange[400] }} />
</Tooltip>
);
}
}
export default TooltipWrapper;
index.js
import React from "react";
import { render } from "react-dom";
import TooltipWrapper from "./TooltipWrapper.js";
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
error: []
};
}
handleClick = () => {
this.setState({
error: [123]
});
};
render() {
return (
<div style={styles}>
<TooltipWrapper error={this.state.error} />
<button onClick={this.handleClick}>change</button>
</div>
);
}
}
render(<App />, document.getElementById("root"));
Please check this demo in codesandbox:demo link
Now the problem is that the second tooltip will not show as expected after changing from the first tooltip by clicking the button. The position of the second tooltip magically moved to the top left, which is quite strange.
Thanks for your help.
Share Improve this question edited Jun 8, 2018 at 9:28 Tim Ogilvy 1,9731 gold badge25 silver badges37 bronze badges asked Jun 8, 2018 at 8:19 laventylaventy 752 silver badges8 bronze badges 2- Are you using old version of material-ui-next – Kishan Mundha Commented Jun 8, 2018 at 8:37
- No. the dependency in the demo: @material-ui/core 1.2.0; @material-ui/icons 1.1.0 – laventy Commented Jun 8, 2018 at 8:51
1 Answer
Reset to default 8try this.
import React from "react";
import { Tooltip } from "@material-ui/core";
import { CheckCircle, Error } from "@material-ui/icons";
import { green, deepOrange } from "@material-ui/core/colors";
class TooltipWrapper extends React.Component {
render() {
return (
<Tooltip
title={
this.props.error.length === 0
? "meet all requirements"
: "Not meet all requirements"
}
placement="bottom-start"
id="test"
>
<span>
{this.props.error.length === 0 ? (
<CheckCircle style={{ color: green[400] }} aria-label="test" />
) : (
<Error style={{ color: deepOrange[400] }} aria-label="test" />
)}
</span>
</Tooltip>
);
}
}
export default TooltipWrapper;
working sandbox version. https://codesandbox.io/s/w2zkn847m5
本文标签: javascriptMaterial UItooltip displays unexpectedlyStack Overflow
版权声明:本文标题:javascript - Material UI - tooltip displays unexpectedly - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742209106a2433369.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论