Manual displaying with OverlayTrigger.

[Nutelac]

How should I manually control OverlayTrigger displaying (show / hide)?

E.g if I want to show only one popover on page:

var UniquePopover = React.createClass({
    render: function() {
        return (
            <ReactBootstrap.OverlayTrigger container={document.body} trigger="manual" placement="right" overlay={
                <ReactBootstrap.Popover>
                    foobar
                </ReactBootstrap.Popover>
            }>
                <ReactBootstrap.Button onClick={this.handleClick} bsStyle="default">unique popover</ReactBootstrap.Button>
            </ReactBootstrap.OverlayTrigger>
        );
    },
    handleClick: function() {
        /* Abstract */
        showCurrentPopover();
        hideOtherPopovers();
    }
});

Is that possible and how can I access to show and hide methods? Thank you.

[pieterv]

Hey @Nutelac you can get access to the OverlayTrigger hide and show methods via a ref, something like the following should work:

var uniquePopoverStore = {};
var uniqueKey = 1;

var UniquePopover = React.createClass({
    render: function() {
        return (
            <ReactBootstrap.OverlayTrigger ref='myPopover' container={document.body} trigger="manual" placement="right" overlay={
                <ReactBootstrap.Popover>
                    foobar
                </ReactBootstrap.Popover>
            }>
                <ReactBootstrap.Button onClick={this.handleClick} bsStyle="default">unique popover</ReactBootstrap.Button>
            </ReactBootstrap.OverlayTrigger>
        );
    },
    handleClick: function() {
        /* Abstract */

        // hideOtherPopovers();
        Object.keys(uniquePopoverStore)
          .forEach(function(key) {
            if (key !== this.__uniqueKey) {
              uniquePopoverStore[key].hide();
            }
          }, this);

        // showCurrentPopover();
        this.refs.myPopover.show();
    },

    componentDidMount: function() {
      this.__uniqueKey = uniqueKey++;
      uniquePopoverStore[this.__uniqueKey] = this.refs.myPopover;
    },

    componentWillUnmount: function() {
      delete uniquePopoverStore[this.__uniqueKey];
    }
});

[Nutelac]

Thank you very much, this help me alot.

[haizi-zh]

Thanks! it really helps!

[avk]

Still works today! Wish this was documented under OverlayTrigger.

[jquense]

the show/hide methods are not really public, if you need to control the overlay state directly use the Overlay component directly

[stuphys1729]

Just in case anyone is looking at this later, it seems OverlayTrigger now only accepts set inputs for trigger and 'manual' isn't one of them. A workaround is to use null instead and still use the show/hide methods.

[charlie632]

How do you use the show/hide methods? I can't seem to make it work.

[eugeneborodkin]

What are the possible values for trigger=... for OverlayTrigger? They only show click in their examples, are there others? And also, how do you pre-open a popover in an initial state? I created a StackOverflow thread on this, https://stackoverflow.com/questions/69121013/react-bootstrap-popover-pre-open-popover-on-initialization I need to pre-open a popover on initialization.