how to show options on hover in react bootstrap

user_5913407 0
Viewed 3951

I have added DropDownButton in my react code I want to show all options on hover to my button but I searched in docs I dint get any options for this below is my code

<DropdownButton
                                bsSize="small"
                                className="ddown"
                                role="menuitem"
                                title="Prgoram Profile">
                                <MenuItem href="#books">Books</MenuItem>

                            </DropdownButton>

can anyone please let me know how to do it? I checked here but Idint get much idea

react-bootstrap twitter-bootstrap-3 reactjs
2 Answers

this solution works great but if you have more than one DropdownButton in your component it will open all menus at once when you hover on one of them...

so based on canaan solution and according to my scenario i made something like this:

createNavDropDownItem(item, index, id) {

        const tabsArray = item.Children.filter(item => !item.notATab);
        const items = tabsArray.map((item, index) => (<MenuItem {...this.getSharedProps(item, index)}>
            <a>{SDK.RequestBuilderUtils.getFormatMessage(this.language, this.messages, item.Name, item.Name)}</a>
        </MenuItem>));
        return <NavDropdown
            {...this.getSharedProps(item, index)}
            onMouseEnter={(e) => this.setState({ [`show-${index}`]: true })}
            onMouseLeave={(e) => this.setState({ [`show-${index}`]: false })}
            open={this.state[`show-${index}`]}
        >
            {items}
        </NavDropdown>

    }
user_27210500
Related