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

Question

If Dropdown.Toggle is not disabled tooltip works. When Dropdown.Toggle has the class

.disabled {
     pointer-events: none;
}.

Tooltip does not work. I'm using the library: react-bootstrap and react-tooltip .

Example: 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

You can directly check the state property( disabled ) when the particular function is called with onClick event on Dropdown component. pointer-events: none disables all the mouse events and hence we are unable to see the tooltip as tooltip mostly gets triggered when you hover it on the button and since hover is also a kind of event in mouse no event is triggered .