blueprintjs - Can multiple BlueprintJS Popovers have the same target? (e.g. one for click and another for hover)

Question

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?

Answer 1

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.