2

Let's say I have a Button component, and I'd like Popover A to appear upon hovering over the Button, and Popover B to appear when clicking on the button. Is this possible?

Dan Kras
  • 138
  • 4

1 Answers1

2

You can do this by nesting the popovers like this: 

  <Popover content={<div>Hover</div>} interactionKind={PopoverInteractionKind.HOVER}>
    <Popover content={<div>Click</div>} interactionKind={PopoverInteractionKind.CLICK}>
      <Button text="Button with two popovers"/>
    </Popover>
  </Popover>

There's a working example here.

In the case you don't want the hover popover to appear whenever a user clicks on the button, you can achieve this by switching to controlled usage by setting the isOpen prop. See the BP docs for more info on this.

Michael Wu
  • 1,177
  • 1
  • 13
  • 34
  • Nice! I went with the below to prevent the hover popover appearing when a user clicks: Hover} interactionKind={PopoverInteractionKind.HOVER} disabled={this.state.hideHover}> Click} interactionKind={PopoverInteractionKind.CLICK} onOpening={() => this.setState({ hideHover: true })} onClosing={() => this.setState({ hideHover: false })} > – Dan Kras Dec 07 '18 at 18:45