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