CODEWITHSUNDEEP
cssreactjsmaterial-ui
AG Mohamed
AG Mohamed

Reputation: 101

CSS for Drop down list popup based on the position that click on the mobile device

I am new to React.js. We use the material-io CSS framework to build our app.

I have a task to display menu items of in a dropdown menu, which opens to the top or bottom based on the position of the menu when it is opened on a mobile device..

It is similar to the Facebook video section when the user clicks the (...)-icon it shows the options based on the screen position of the icon.

Facebook Top appear

Facebook bottom appear]2

Facebook menu bottom appear

Facebook bottom Appear

Upvotes: 1

Views: 495

Answers (2)

alinn
alinn

Reputation: 83

You Can Use react-power-tooltip. For Use:

  1. Install From Npm $ npm install react-power-tooltip --save

  2. import To Project import Tooltip from 'react-power-tooltip'

  3. Add a hover state & mouse event handler to the enclosing target component

    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;

  4. Add the tooltip inside the target element

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

For More Information: https://justinrhodes1.github.io/react-power-tooltip/

Upvotes: 0

Azir Yasin
Azir Yasin

Reputation: 191

You can make use of a library that provides a tooltip menu. For example https://justinrhodes1.github.io/react-power-tooltip/

Upvotes: 1

Related Questions