Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popover delay option? #5389

Closed
jziggas opened this issue Sep 12, 2019 · 3 comments
Closed

Popover delay option? #5389

jziggas opened this issue Sep 12, 2019 · 3 comments

Comments

@jziggas
Copy link

jziggas commented Sep 12, 2019

Tooltips have a [delay]="500" input but I was surprised to see that popovers don't have the same feature?

daniloff200 pushed a commit that referenced this issue Jan 14, 2020
* add delay option to popover
* fix(popover): small fix in description
@daniloff200 daniloff200 removed their assignment Jan 15, 2020
@daniloff200
Copy link
Contributor

closed in #5582

IraErshova pushed a commit to IraErshova/ngx-bootstrap that referenced this issue Jan 20, 2020
…#5582)

* add delay option to popover
* fix(popover): small fix in description
@amiram
Copy link
Contributor

amiram commented Feb 15, 2020

Well, after my pull request was merged, I discovered it didn't help me. The thing I wanted is to not open the popover if the user just moved the mouse over the element for a very short time. This delay just delayed the opening of the popover but eventually the popover showed up after some time, even though the mouse was already far from the element.
If you want to not show the popover if the mouse was over the element just for a short time, you can use the following code:

<a #pop="bs-popover"
    [popover]="popTemplate"
    [outsideClick]="true"
    (click)="false"
    (mouseenter)="showPop()"
    (mouseleave)="onPopMouseLeave()"
    triggers=""
    href="#">
    <i class="fas fa-some-icon"></i>
</a>
<ng-template #popTemplate>
    <div>some template</div>
</ng-template>

In component:

popMouseLeft: boolean;
@ViewChild('pop', {static: false}) pop: PopoverDirective;

showPop() {
    this.popMouseLeft = false;

    setTimeout(() => {
        if (!this.popMouseLeft && this.pop) {
            this.pop.show();
        }
    }, 500);
}

onPopMouseLeave() {
    this.popMouseLeft = true;
}

@daniloff200
Copy link
Contributor

Thanks for that, @amiram !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants