Question

我有一个要求，我必须显示带有圆圈的搜索图标。我的意思是一个带有搜索图标的圆圈，当我切换鼠标时，必须显示一个工具提示。

我可以使用带有svg图标的FlotingActionButton来实现这一点，但问题是我无法在其上放置工具提示。

因为我知道替代方案是使用带有svg图标的IconButton。这有一个设置工具提示的选项。所以我将其整合如下

 import IconButton from ‘material-ui/IconButton’;
 import SearchIcon from ‘material-ui/svg-icons/action/search’;
 import Lens from ‘material-UI/svg-icons/image/lens’;

 <IconButton tooltip=“Click to Search”>
      <Lens color=“red”>
            <SearchIcon color=“white” />
      </Lens>
 </IconButton>

但问题是我只能看到圈子，但搜索图标没有出现在镜头内。有什么建议我做错了什么？或者，有什么其他方法可以通过工具提示实现吗？请建议

Answer 1

将一个图标放入另一个图标是不可能的，但您可以在FlotingActionButton上显示工具提示。有一个内部材料-ui组件Tooltip。它没有记录，但您可以这样导入：

import Tooltip from "material-ui/internal/Tooltip";

创建这个简单的组件：

class TooltipHolder extends Component {
  constructor() {
    super();

    this.state = {
      isVisible: false
    };
  }

  render() {
    return (
      <div
        style={{ position: 'relative' }}
        onMouseEnter={() => this.setState({ isVisible: true })}
        onMouseLeave={() => this.setState({ isVisible: false })}
      >
        {this.props.children}

        <Tooltip
          label={this.props.label}
          show={this.state.isVisible}
          horizontalPosition="center"
          verticalPosition="top"
          touch={true}
        />
      </div>
    );
  }
}

现在，您可以在render方法中使用此组件，并且每当用户将鼠标悬停在您作为TooltipHolder子项传递的组件上时，工具提示将显示。

<TooltipHolder label="tooltip text">
  <FloatingActionButton mini={true}>
    <SearchIcon />
  </FloatingActionButton>
</TooltipHolder>

检查this demo以了解您所描述的情况。

在IconButton中将材质-UI svg图标添加到另一个内部

1 个答案: