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 free asked 4 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/

Add comment

Bartosz Termena staff answered 4 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=71093" target="_blank" rel="nofollow">@Pankaj charpe</a></p>

<p>Ok, now i understand what you mean, try this:</p>

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

<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>
</code></pre>

<p>Best, Bartosz.</p>

Please insert min. 20 characters.

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 free commented 4 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 4 years ago

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

Add comment

Bartosz Termena staff answered 4 years ago

0 0 Best answer

<p>You can set multiple triggers to achieve this:</p>

<pre class="prettyprint"><code>  triggers="focus mouseenter"
</code></pre>

<p>With this settings, popup will show on mouseenter, and hide only on user click.</p>

<p>Fulle example below:</p>

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

<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>
</code></pre>

<p>Hope it helps!</p>

<p>Best, Bartosz.</p>

Please insert min. 20 characters.

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 free commented 4 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?

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 8.3.1
Device: Desktop
Browser: Chrome
OS: windows
Provided sample code: No
Provided link: Yes

Pankaj charpe

50Support score
8Questions 1Answers 0Snippets