最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Material UI - tooltip displays unexpectedly - Stack Overflow

programmeradmin2浏览0评论

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
Add a ment  | 

1 Answer 1

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

发布评论

评论列表(0)

  1. 暂无评论