时间戳

首页 > 解决方案 > 将工具提示添加到禁用的 Dropdown.Toggle

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

问题描述

如果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; 
}

标签： javascriptcssreactjsreact-bootstrap

解决方案

当使用组件上的事件disabled调用特定函数时，您可以直接检查状态属性（ ）。禁用所有鼠标事件，因此我们无法看到工具提示大多是在您使用它时触发的，因为它也是鼠标中的一种事件，没有触发事件。onClickDropdownpointer-events: nonetooltiphoverbuttonhover

推荐阅读