Search code examples
blueprintjs

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

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?

Solution

  • 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.