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


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

Pankaj charpe pro premium asked 2 years ago

I want to create a popup on a card . When we hover over the card it will show up.I am able to achieve this. I am giving information in the popup along with the button.But as soon as I leave the card to enter into popup it is going away.It is similar to udemy cards.Can you please help me to achieve this?https://mdbootstrap.com/docs/angular/advanced/popovers/


Bartosz Termena staff answered 2 years ago

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.


Pankaj charpe pro premium commented 2 years ago

Thanks. That's helped. But I want the popup go away as soon as leave the card not on the click. Can you please guide me how to achieve this?


Bartosz Termena staff answered 2 years ago

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.


Pankaj charpe pro premium commented 2 years ago

Hi Bartosz, I tried the solution you suggested above, but this time I am not able to enter into popup.Can you please share your email id? I will send a demo app.

Thanks,Pankaj


Arkadiusz Idzikowski staff commented 2 years ago

You can send the demo to a.idzikowski@mdbootstrap.com


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.3.1
  • Device: Desktop
  • Browser: Chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: Yes
Tags