我是React.js新手，我們用material-io CSS框架來搭建我們的app。

我有一個在下拉菜單中顯示菜單項的任務，當它在移動設備上打開時，它會根據菜單的位置打開到頂部或底部..

當用戶單擊(...)-icon它根據圖標在屏幕上的位置顯示選項。

臉書底出現]2

臉書菜單底部出現

您可以利用提供工具提示菜單的庫。例如https://justinrhodes1.github.io/react-power-tooltip/

你可以使用反應能力工具提示。供使用:

從Npm安裝 $ npm安裝反應-電源-工具提示-保存

導入到項目 從“反應能量工具提示”導入工具提示

添加懸停狀態。封閉目標組件的鼠標事件處理程序

class Test extends Component {
  state = {
    show: false
  }

  showTooltip = bool => {
    this.setState({ show: bool })
  }

  render() {
    return (
      {/* Target element position needs to be RELATIVE */}
      <div 
        style={{ position: 'relative' }}
        onMouseOver={() => this.showTooltip(true)} 
        onMouseLeave={() => this.showTooltip(false)}>

          {/* ADD TOOLTIP HERE */}

        </div>
    );
  }
}
export default Test;

在目標元素中添加工具提示

{/* Add options/text via span elements */}
<Tooltip show={this.state.show}>
  <span>Some text</span>
</Tooltip>

有關更多信息: https://justinrhodes1.github.io/react-power-tooltip/