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.

• javascript
• reactjs
• material-ui

• 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 1

try 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