javascript - Material UI - tooltip displays unexpectedly - Stack Overflow

admin管理员组

文章数量:1326293

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

Share Improve this question Follow edited Jun 8, 2018 at 9:28 Tim Ogilvy 1,97311 gold badge2525 silver badges3737 bronze badges asked Jun 8, 2018 at 8:19 laventylaventy 7522 silver badges88 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

本文标签： javascriptMaterial UItooltip displays unexpectedlyStack Overflow