Popup window is going away as soon as I try to enter it

Hi!

You can set multiple triggers to achieve this:

  triggers="focus mouseenter"

With this settings, popup will show on mouseenter, and hide only on user click.

Fulle example below:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <mdb-card>
        <!--Card image-->
        <mdb-card-img
          src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg"
          alt="Card image cap"
        ></mdb-card-img>
        <!--Card content-->
        <mdb-card-body>
          <!--Title-->
          <mdb-card-title>
            <h4>Card Title</h4>
          </mdb-card-title>

          <!--Text-->
          <mdb-card-text>
            Some quick example text to build on the card title and make up the bulk of the card's
            content.
          </mdb-card-text>

          <button
            type="button"
            mdbBtn
            color="primary"
            class="waves-light"
            mdbPopover="And here some amazing content. It's very engaging. Right?"
            placement="right"
            mdbPopoverHeader="Popover on right"
            triggers="focus mouseenter"
            mdbWavesEffect
          >
            Popover on right
          </button>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>
</div>

Hope it helps!

Best, Bartosz.

Dear @Pankaj charpe

Ok, now i understand what you mean, try this:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <mdb-card (mouseleave)="pop.hide()">
        <!--Card image-->
        <mdb-card-img
          src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg"
          alt="Card image cap"
        ></mdb-card-img>
        <!--Card content-->
        <mdb-card-body>
          <!--Title-->
          <mdb-card-title>
            <h4>Card Title</h4>
          </mdb-card-title>

          <!--Text-->
          <mdb-card-text>
            Some quick example text to build on the card title and make up the bulk of the card's
            content.
          </mdb-card-text>

          <button
            type="button"
            mdbBtn
            color="primary"
            class="waves-light"
            mdbPopover="And here some amazing content. It's very engaging. Right?"
            placement="right"
            mdbPopoverHeader="Popover on right"
            triggers="mouseenter"
            mdbWavesEffect
            #pop="bs-mdbPopover"
          >
            Popover on right
          </button>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>
</div>

Best, Bartosz.