向禁用的Dropdown.Toggle添加工具提示

Question

如果Dropdown.Toggle未被禁用，工具提示可以工作。当Dropdown.Toggle有类时

.disabled {
     pointer-events: none;
}.

工具提示不工作。我正在使用库：react-bootstrap和react-tooltip。

示例：https://stackblitz.com/edit/react-tnh9rr

class App extends Component {
  constructor() {
    super();
    this.state = {
      disabled: true
    };
  }

  render() {
    return (
      <Dropdown className = {`${this.state.disabled  ? 'disabled' :     null}`} onClick={this.checkStatus}>
        <Dropdown.Toggle  data-tip="hello world" variant="success" id="dropdown-basic">
            Change status
        <ReactTooltip/>
        </Dropdown.Toggle>
        <Dropdown.Menu >
            <Dropdown.Item>AAAAAAA</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    );
  }
}

CSS

.disabled {
    pointer-events: none; 
}

Answer 1

当在disabled组件上使用onClick事件调用特定函数时，您可以直接检查状态属性( tooltip )。pointer-events: none禁用所有鼠标事件，因此我们无法将tooltip视为工具提示，当您在button上hover它时，通常会触发tooltip，而且hover也是鼠标中的一种事件，不会触发任何事件。