ngneat/helipopper

🚁 A Powerful Tooltip and Popover for Angular Applications

helipopper's Issues

How to force the update of the Tippy instance from the directive?

I use the Tippy directive and I would like to be able to refresh its position after opening it because its position is sometimes problematic when it is at the bottom of the page. So I wanted to make sure that when the (visible) event is called do a forceUpdate.

Example:

<button [tippy]="myPopper" [placement]="'bottom-end'"
        variation="popper" [data]="item" #popper="tippy" (visible)="popperIsVisible($event, popper)">
        Action
</button>

popperIsVisible(state: boolean, popper: TippyDirective) {
    popper.popperInstance.forceUpdate(); 
    //OR DIRECTLY
    popper.forceUpdate()
}

Is it possible to expose the popper instance in the directive or to have a forceUpdate() method directly?

Variations for lazy loaded modules

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[x ] Other... Please describe:

Current behavior

The tooltip variations provided in the root module are not accessible via lazy loaded modules.

Expected behavior

The tooltip variations provided in the root module should be accessible from lazy loaded modules.

Minimal reproduction of the problem with instructions

Create a root module in an Angular application that includes tooltip variations.
Create a lazy loaded module in the same application.
Attempt to access the tooltip variations from the lazy loaded module.
Notice that the tooltip variations are not accessible.

What is the motivation / use case for changing the behavior?

The motivation for changing this behavior is to enable lazy loaded modules to utilize the tooltip variations provided in the root module. This would improve code organization and reusability, allowing developers to define tooltip variations once and use them throughout the application.

Environment

Angular version: 15


Browser:
- [ x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 18  
- Platform:  mac

Others:

Updating tp content from empty to value doesn't create the tp instance

When tooltip is initialized as empty string, null or undefined and value of the tooltip is loaded later then instance of tippy is not created.

Try stackblitz:
https://stackblitz.com/edit/kulxrc

The problem seems to be in createInstance function (image below). Instance is not created when content is empty and it's not created later when content is set to value.

Disable all tippy programmatically

I'm submitting a...

[x] Support request

Hi, is it possible to disable all the configured tooltips programmatically? I have an application wher I don't want to show any tippy based on some condition decided by a observable stream.

The solution for now is to calculate the required conditions (based on platform, screen size and custom user setting) and add or remove a class to the entire body that hide all .tippy-box child elements, but is there any other way supported by the library?

Thanks

AllowHTML flag doesn't work in custom variations

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

I have bunch of tooltips with custom HTML templates in my project and they worked perfect on 3.1.0 version of @ngneat/helipopper.
After upgrading the version to 5.1.4 it doesn't work. It is now showing tags (like it is just a string) rather than parsed HTML.
I've tried to show a tooltip with a template using custom variation and allowHTML flag, but it doesn't seem to work too.

I've created a new variation that extends the existing one:

export const TEMPLATE_TOOLTIP = {
  ...tooltipVariation,
  allowHTML: true, // this property doesn't work
  delay: 1000, // this one works
};

Then in app.module.ts

TippyModule.forRoot({
  defaultVariation: 'tooltip',
  variations: {
    tooltip: tooltipVariation,
    popper: popperVariation,
    templateTooltip: TEMPLATE_TOOLTIP,
  }
}),

Tooltip is defined in component like:
Tooltip = '<p>some title</p><p>my custom content</p>';

In template:
<span [tippy]="Tooltip" variation="templateTooltip"></span>

After all that manipulations I still see my tooltip rendering with tags and not parsing the custom template.
Can you please guide me what am I doing wrong? Or is it the issue with "allowHTML" flag?

Environment

Angular version: 13.3.6


Browser:
- [x] Chrome (desktop) Version 101.0.4951.67 (Official Build) (64-bit)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 16.15.0 
- Platform:  Windows 

Others:
"@ngneat/helipopper": "^5.1.4", (was 3.1.0)
"@ngneat/overview": "^3.0.4", (was 1.0.0)

Feature: Pass plugin values to Tippy props

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

In Tippy, if you add a plugin, that plugin now accepts a value on the TippyProps matching that plugin name. Helipopper does allow adding plugins, but there doesn't appear to be a way to pass those plugin values into the TippyProps from the TippyDirective.

This means that the plugin strategy for Tippy is handicapped in a way that is preventing me from solving a problem.

Expected behavior

Ideally, there would be an input like [tpPluginValues]="{ myPlugin: 123 }" that would pass these values into the TippyProps. I do understand that there could be some annoyances if somebody names their plugin the same thing as a "core" tippy prop, but this is how the Tippy plugins work.

What is the motivation / use case for changing the behavior?

I'm trying to write a plugin for a "singletonGroup" which allows only one Tippy to be open per group key. I can't pass the group key into the plugin though. Plugins are useful for the maintainer of helipopper because people can extend the library with bespoke functionality.

Environment

Angular version: 17


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version:   
- Platform:  

Others:

Use Component as content

Hi!

I cannot use component in tooltip as content properly. It's render on each hover below. Could you check it, pls!
https://stackblitz.com/edit/angular-10-1-10-grbcun

When using TippyModule.forRoot().providers inside storybook component I get this error: Converting circular structure to JSON starting at object with constructor 'InjectionToken'

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I am using storybook 6.3.2 and I have a component that uses TippyModule. When I add the providers to that component story I get the error I mentioned:

decorators: [ moduleMetadata({ imports: [TooltipModule, TippyModule], providers: TippyModule.forRoot().providers || [] }) ],

and this is the error:
Converting circular structure to JSON --> starting at object with constructor 'InjectionToken' | property 'ɵprov' -> object with constructor 'Object' --- property 'token' closes the circle TypeError: Converting circular structure to JSON --> starting at object with constructor 'InjectionToken' | property 'ɵprov' -> object with constructor 'Object' --- property 'token' closes the circle at JSON.stringify (<anonymous>) at CanvasRenderer.push../node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.js.AbstractRenderer.fullRendererRequired (http://localhost:6006/vendors~main.iframe.bundle.js:117109:42) at CanvasRenderer.<anonymous> (http://localhost:6006/vendors~main.iframe.bundle.js:117069:35) at step (http://localhost:6006/vendors~main.iframe.bundle.js:117001:23) at Object.next (http://localhost:6006/vendors~main.iframe.bundle.js:116982:53) at http://localhost:6006/vendors~main.iframe.bundle.js:116976:71 at new ZoneAwarePromise (http://localhost:6006/vendors~main.iframe.bundle.js:300092:33) at push../node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.js.__awaiter (http://localhost:6006/vendors~main.iframe.bundle.js:116972:12) at CanvasRenderer.push../node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.js.AbstractRenderer.render (http://localhost:6006/vendors~main.iframe.bundle.js:117061:16) at CanvasRenderer.<anonymous> (http://localhost:6006/vendors~main.iframe.bundle.js:117229:74)

Expected behavior

I shouldn't get any error when using TippyModule.forRoot() together with storybook

Minimal reproduction of the problem with instructions

Install storybook 6.3.2, add a component that uses TippyModule, inside the story file add the decorators imports property:

decorators: [ moduleMetadata({ imports: [ TooltipModule, TippyModule], providers: TippyModule.forRoot().providers || [] }) ],

What is the motivation / use case for changing the behavior?

It's a bug: Converting circular structure to JSON

Environment

 System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.12.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.0

Angular version: 11.2.13

Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 

(visible) bug

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

at the first click on the button, a message appears in the console, but the counter is not updated

Expected behavior

at the first click on the button, a message appears in the console and the counter is updated

Minimal reproduction of the problem with instructions

@Component({
  selector: 'app-is-visible',
  templateUrl: './playground.component.html',
  styleUrls: ['./playground.component.scss'],
})
export class PlaygroundComponent {
  comp = ExampleComponent;

  constructor() {}
  show = true;
  counter = 1;
  handleStatus($event: boolean): void {
    this.counter = this.counter + 1;
    console.log('show tooltip', $event);
  }
}

template:

<div id="custom-component">
  <h6>Counter {{counter}}</h6>

  <div class="btn-container">
    <button class="btn btn-outline-danger" [tippy]="comp" variation="popper" (visible)="handleStatus($event)">
      Open component
    </button>
  </div>
</div>

Environment

Angular version: 12.0.0


Browser:
- [x] Chrome (desktop) version 95
 
For Tooling issues:
- Node version: v16.11.1
- Platform:  Linux

TemplateRef cannot work with embedded ng-container

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

ng-container cannot be used as part of template ref

Expected behavior

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-ivy-2ffvs5?file=src%2Fapp%2Fapp.component.html

Remove ng-container and other info will be shown

What is the motivation / use case for changing the behavior?

That's a huge limitation :)

Environment

Angular version: 10


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [x] Safari (desktop) version LATEST
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 14.4.0
- Platform:  MacOS

Others:

[FEAT] How to get the instance of the component created by the service ?

I used the tippyService to create a dynamic popper with an Angular component like this:

this.tippy = this.tippyService.create(this.suggestions.nativeElement, ContextMenuComponent, {
        variation: "popper",
        getReferenceClientRect: props.clientRect,
        appendTo: () => document.body,
        showOnCreate: true,
        interactive: true,
        trigger: 'manual',
        placement: 'auto',
        hideOnClick: false,
})

I would like to be able to interact with the instance of the ContextMenuComponent since this component queries an API based on what I type in an editor. Except that I don't see how to get the instance and for example do something like :

this.tippy.component.myFunction(args);

export class ContextMenuComponent implements OnInit {

  constructor(
    @Inject(TIPPY_REF) tippy: TippyInstance
  ) { }

  ngOnInit(): void {
  }

  myFunction(args) {
    //NOTE: queries an API
  }
}

Would that be possible? Thanks

Error installing package in Angular v12

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Can't install the package because the installation command

ng add @ngneat/helipopper

fails with an error.

Error log:

λ ng add @ngneat/helipopper
i Using package manager: npm
√ Found compatible package version: @ngneat/[email protected].
√ Package information loaded.

The package @ngneat/[email protected] will be installed and executed.
Would you like to proceed? Yes
√ Package successfully installed.
"SchematicsHelipopperAdd" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.
Cannot read property 'defaultProject' of undefined

After the ng add script running, the @ngneat/helipopper package is added to package.json.
If I try to run the project using npm start, I get a deps error:

C:\dev\redacted-web\node_modules\@angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40
                throw new Error("The target entry-point \"" + invalidTarget.entryPoint.name + "\" has missing dependencies:\n" +
                ^

Error: The target entry-point "@ngneat/helipopper" has missing dependencies:
 - @ngneat/overview

    at TargetedEntryPointFinder.findEntryPoints (C:\dev\redacted-web\node_modules\@angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40:23)
    at C:\dev\redacted-web\node_modules\@angular\compiler-cli\ngcc\src\execution\analyze_entry_points.js:29:41
    at SingleProcessExecutorSync.SingleProcessorExecutorBase.doExecute (C:\dev\redacted-web\node_modules\@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:28:29)
    at C:\dev\redacted-web\node_modules\@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:59
    at SyncLocker.lock (C:\dev\redacted-web\node_modules\@angular\compiler-cli\ngcc\src\locking\sync_locker.js:34:24)
    at SingleProcessExecutorSync.execute (C:\dev\redacted-web\node_modules\@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:27)
    at Object.mainNgcc (C:\dev\redacted-web\node_modules\@angular\compiler-cli\ngcc\src\main.js:74:25)
    at Object.process (C:\dev\redacted-web\node_modules\@angular\compiler-cli\ngcc\index.js:29:23)
    at NgccProcessor.processModule (C:\dev\redacted-web\node_modules\@ngtools\webpack\src\ngcc_processor.js:164:16)
    at C:\dev\redacted-web\node_modules\@ngtools\webpack\src\ivy\host.js:128:18
    at C:\dev\redacted-web\node_modules\@ngtools\webpack\src\ivy\host.js:58:24
    at Array.map ()
    at Object.host.resolveModuleNames (C:\dev\redacted-web\node_modules\@ngtools\webpack\src\ivy\host.js:56:32)
    at actualResolveModuleNamesWorker (C:\dev\redacted-web\node_modules\typescript\lib\typescript.js:106560:133)
    at resolveModuleNamesWorker (C:\dev\redacted-web\node_modules\typescript\lib\typescript.js:106810:26)
    at resolveModuleNamesReusingOldState (C:\dev\redacted-web\node_modules\typescript\lib\typescript.js:106907:24)

Notes:

• The Cannot read property 'defaultProject' of undefined error seems to come from here.
• The workaround is to manually install @ngneat/overview

Expected behavior

Package should be installed successfully,

Minimal reproduction of the problem with instructions

1. Create new Angular v12 project using ng new tooltiptest
2. Run ng add @ngneat/helipopper

What is the motivation / use case for changing the behavior?

To be able to use this package.

Environment

Angular CLI: 12.0.5
Node: 14.16.1
Package Manager: npm 7.12.0
OS: win32 ia32

Angular: 12.0.5
... animations, cli, common, compiler, compiler-cli, core
... elements, forms, google-maps, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.5
@angular-devkit/build-angular   12.0.5
@angular-devkit/core            12.0.5
@angular-devkit/schematics      12.0.5
@schematics/angular             12.0.5
rxjs                            6.6.7
typescript                      4.2.4

Suggestion: Provide an option to pass context in tippy.service.ts

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Provide an option to pass context in tippy.service.ts in create method.

Didn't find any option to pass context if we use create method of tippy service. Also some warnings from tippy.js are also there.

SSR not working with version 8

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Helipopper is not working with SSR with the newest version (no problems with the previous version)

./node_modules/@ngneat/helipopper/fesm2022/ngneat-helipopper.mjs:140
const defaultAppendTo = document.body;
                        ^


ReferenceError: document is not defined

Expected behavior

Should work with SSR

Add lifecycle hooks per variation

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Currently its working only in case if we define onShow hook at global level but not in a specified variation.
Following source code:

helipopper/projects/ngneat/helipopper/src/lib/tippy.directive.ts

Line 280 in 3c57990

this.globalConfig.onShow?.(instance);

onShow hook is calling only from global settings but i think we can add check is variation contain lifecycleHooks and then call them instead of global one.

Expected behavior

Ability to define lifecyclehooks in directive options or at variation level

What is the motivation / use case for changing the behavior?

Main motivation is to add more freedom of customization for tippy. My case is to hide any other tooltips that already opened to leave only single tooltip visible.

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

document is not defined in SSR apps

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Using tippy on SSR apps throws this error:

ERROR ReferenceError: document is not defined.

The error comes from here

Expected behavior

It should not throw this error.

Minimal reproduction of the problem with instructions

just have tippy on an angular app with SSR

Environment

Angular version: 12.2.10

 
For Tooling issues:
- Node version: 14.x
- Platform:  Linux

Note

I've mentioned the issue before, didn't really have time for a PR but fortunately was fixed anyway from other contributor. But maybe after the restructure I think on 2.x the fix was removed.

Expose more options from the global config

Bug: tippy.js `isLazy` is not a valid prop

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

(Only affect development)
Console Error with tpIsLazy Input
tippy.esm.js:304 tippy.js 'isLazy' is not a valid prop. You may have spelled it incorrectly, or if it's a plugin, forgot to pass it in an array as props.plugins. All props: https://atomiks.github.io/tippyjs/v6/all-props/Plugins: https://atomiks.github.io/tippyjs/v6/plugins/👷‍ This is a development-only message. It will be removed in production.

Expected behavior

Remove isLazy on projection to tippy props

Minimal reproduction of the problem with instructions

Any use of tpIsLazy inputs

What is the motivation / use case for changing the behavior?

Environment

Angular version: 15.2


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 16  
- Platform:  Mac 

Others:

Tippy 6.0.0 Angular 14 Changelog

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

The Changelog.md lists upgrade to Angular 14 in the Breaking Changes Section for Version 6.0.0. But the referenced PR shows an Update to Version 15 e040211. The Problem being that Version 6.0.0 does not seem to work with Angular 14. Following error during build:

Error: node_modules/@ngneat/helipopper/lib/tippy.directive.d.ts:69:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.

69     static ɵdir: i0.ɵɵDirectiveDeclaration<TippyDirective, "[tippy]", ["tippy"], { "appendTo": "appendTo"; "delay": "delay"; "duration": "duration"; "hideOnClick": "hideOnClick"; "interactive": "interactive"; "interactiveBorder": "interactiveBorder"; "maxWidth": "maxWidth"; "offset": "offset"; "placement": "placement"; "popperOptions": "popperOptions"; "showOnCreate": "showOnCreate"; "trigger": "trigger"; "triggerTarget": "triggerTarget"; "zIndex": "zIndex"; "lazy": "lazy"; "variation": "variation"; "isEnabled": "isEnabled"; "className": "className"; "onlyTextOverflow": "onlyTextOverflow"; "data": "data"; "useHostWidth": "useHostWidth"; "hideOnEscape": "hideOnEscape"; "detectChangesComponent": "detectChangesComponent"; "content": "tippy"; "customHost": "tippyHost"; "isVisible": "isVisible"; }, { "visible": "visible"; }, never, never, true, never>;

Expected behavior

The Changelog.md should show the dependency to Angular 15 (and not Angular 14) for Version 6.0.0.

Add closeOnEscape input

It's a common functionality to have the ability to close the popper when clicking the escape button.

Missing release tag for 5.1.5

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[X ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I'm submitting a documentation issue regarding releases.
In the package.json file of my application I have:

"@ngneat/helipopper": "^5.1.4"

During npm install, I got 5.1.5.

"name": "@ngneat/helipopper",
"version": "5.1.5",
"description": "A Powerful Tooltip and Popover for Angular Applications",


But I cannot find this release tagged or mentioned anywhere. According to npmjs, this version (5.1.5) doesn't exist.
https://www.npmjs.com/package/@ngneat/helipopper?activeTab=versions
I need a tag for this release, since I need it for documentation purposes.
Thanks a lot in advance!

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[Feature Request] provide an API to open the popper programmatically

Add Cypress specs

Get data in the component

Hello. Thank you so much for this library.

Can i get passed data < [tippy]="tippyComponent" [data]="label" > inside tippyComponent?

I tried to find something in @Inject(TIPPY_REF) private readonly _tippyInstance: TippyInstance but didn't

Get data in the component

Discussed in #73

^{Originally posted by admin-happ October 29, 2021}
Hello. Thank you so much for this library.

Can i get passed data < [tippy]="tippyComponent" [data]="label" > inside tippyComponent?

I tried to find something in @Inject(TIPPY_REF) private readonly _tippyInstance: TippyInstance but didn't

Change tippy content dynamically if tippy content is already shown up

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Hey, is it possible to change the tippy content dynamically during the tippy content is already shown?

Environment

Angular version: 12.xx


Browser:
- [] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Tooltip is not refreshed (TemplateRef as content, [data] variable)

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[-] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I' m Using TemplateRef as content and the [data] variable to create a tooltip. It works perfectly.
The problem is that if [data] is changed, the change is not reflected in the tooltip.

Expected behavior

If [data] is changed the tooltip should be refreshed.

Tippy with Component as content & Jest Tests

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

When I try to test a component with jest, that has a tippy with a component as content I get the following error:

TypeError: (0 , import_tippy.default) is not a function

I'm not sure if I'm doing something wrong, if it's just not supported or if it's a bug. Any help/workaround would be appreciated.

Thanks a lot

Expected behavior

The test should pass

Minimal reproduction of the problem with instructions

• Create a new angular application
• Replace jasmin with jest
• Create a new Component
• Add Tippy to the project
• Add tippy somewhere in the app.component with reference to the newly created component
• Run the tests with jest

What is the motivation / use case for changing the behavior?

Environment

Angular version: 15.1.0 (Also with 14.2.12)
Jest version: 28.1.3
helipopper version: 6.5.0

 
For Tooling issues:
- Node version: V16.19.0
- Platform:  Linux

Others:

Migrate to floating-ui

https://www.floating-ui.com/docs/getting-started

Rare bug in case with transloco

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Hi,
In rare cases with using transloco we can see that message in helipopper is empty. I thing this bug can be related to that translations are loading asynchronously and not calling change detection when it loaded in template.

For translations we using w/ directive (*transloco="let t;")

Expected behavior

No empty messages when using with transloco

Minimal reproduction of the problem with instructions

Rare cases, 1 in 10 or 20 times.

What is the motivation / use case for changing the behavior?

Potential bug.

Environment

Angular version: 9.0.4


Browser:
- [x] Chrome (desktop) version 84
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 12.16.3
- Platform:  Windows

Running `tsc` after updating to ~8.0.0 produces `error TS2307: Cannot find module 'tippy.js' or its corresponding type declarations`

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Running tsc on a project importing from @ngneat/helipopper@~8.0.0 produces:

node_modules/@ngneat/helipopper/lib/tippy.types.d.ts:1:33 - error TS2307: Cannot find module 'tippy.js' or its corresponding type declarations.

1 import { Instance, Props } from 'tippy.js';

Expected behavior

tsc transpiles without error, as it did in 7.1.1.

Minimal reproduction of the problem with instructions

Run tsc with default skipLibCheck: false on a project importing from @ngneat/helipopper@~8.0.0.

What is the motivation / use case for changing the behavior?

Project should transpile without error.

Environment

Angular version: 16.1.5


Browser:
N/A
 
For Tooling issues:
- Node version: v18.16.1
- Platform:  MacOS 13.4.1

Others:

Typo in documentation (isEnable)

In the documentation in "Inputs" section there is a property called "isEnable" but it is wrong. The correct name of this property is "isEnabled. Please fix the documentation. Thanks

onShown event not firing with default popperVariation

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I'm using a slightly modified version of the default popperVariation

myVariation: {
    ...popperVariation,
    appendTo: 'parent',
},

In my component I want to focus the first input field in the tippy's content as soon as it has appeared

@ViewChild('tippy') tippy: TippyInstance;

ngAfterViewInit(): void {
    this.tooltip.setProps({
      onShown : instance => console.log('Hello from tippy')
    });
}

Console doesn't budge. This is simply solved by adding an animation

@ViewChild('tippy') tippy: TippyInstance;

ngAfterViewInit(): void {
    this.tooltip.setProps({
      animation: 'scale',
      onShown : instance => console.log('Hello from tippy')
    });
}

Expected behavior

In the documentation it's said that the event relies on the CSS transitioned to fire and the default popperVariation sets the animation to null.
Shouldn't onShown fire anyway?
If this is the intended beheviour, could you make it clearer in the documentation?

Thanks for your consideration,
have a great day

Environment

Angular version: 12.0.4


Browser:
- [x] Chrome (desktop) version 91.0.4472.114
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Can not read property 'hide' of undefined, using templateRef

Current behavior

Can not call .hide() method of the helipopper trigger element from provided template component. Actually do not know if this is a real Helipopper problem or just casual Angular behaviour or semantic problem.

Expected behavior

(confirm)="removePopTriggerRef.hide()" / (close)="removePopTriggerRef.hide()" actually hides the pop and not firing error ERROR TypeError: Cannot read property 'hide' of undefined.

Minimal reproduction of the problem with instructions

<button mat-icon-button color="warn" [helipopper]="removePopTplRef" helipopperVariation="popper" helipopperTriggerRef="manual" #removePopTriggerRef="helipopper" (click)="activeElementId = element.id; removePopTriggerRef.show();"> <mat-icon>delete</mat-icon> </button>

<ng-template #removePopTplRef> <app-remove-pop (confirm)="removePopTriggerRef.hide()" (close)="removePopTriggerRef.hide()"></app-remove-pop> </ng-template>

https://stackblitz.com/edit/helipopper

Feature Request: Export CreateOptions, TippyProps and TIPPY_CONFIG

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[X] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

CreateOptions, TippyProps and TIPPY_CONFIG are not present in public-api.ts

Expected behavior

This should also be exported

What is the motivation / use case for changing the behavior?

Due to some reason, If user cannot pass TIPPY_CONFIG in forRoot. If possible can this be exported as well so that it can be directly provided instead of adding it in forRoot.
Also CreateOptions, TippyProps are also not exported

Create tippy Programmatically

I'm submitting an issue

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

The example have a variable conflict, both TippyService and TippyInstance have the same variable name. That's issue one.
After fixing this, when I call:
const myTippyInstance = this.tippyService.create(element, 'this field is required', { arrow: true });

I can't call myTippyInstance.open() because:
Property 'open' does not exist on type 'ExtendedTippyInstance<"this field is required">'.

I've cast the result of create to any but still get the error on the console, but the tooltip shows correctly. What should I do to avoid this crash?

Expected behavior

create function should return a type that allows to call open method right away. Apart of that, the crash is weird in the sense that the tooltip shows, so no error should be shown.

Minimal reproduction of the problem with instructions

Simple angular 13 app applying the simplest example, the one on your github page.

What is the motivation / use case for changing the behavior?

Tooltip over calendar events.

Environment

Angular version: 13.3.2

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 101.0.1
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 

useHostWidth input does not respect value changes from true to false

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Currently, the input for useHostWidth on the TippyDirective doesn't apply changes to the input. For instance, if I start with [useHostWidth]="true" and then switch to false, the tippy will continue to use the host's width

Expected behavior

The input for useHostWidth should respect any changes after the directive has been initialized.

Minimal reproduction of the problem with instructions

I have coded up a reproduction in this repository. Instructions are shown when you run the app.
https://github.com/baleeds/helipopper-bug

What is the motivation / use case for changing the behavior?

As far as I can tell, all other inputs respect value changes. Consistency dictates that useHostWidth should do the same. We see the bug in our app when we want to watch a dimension of the parent element as the source for determining whether the tippy should use the host's width.

Environment

Helipopper version: 9.1.0

Angular version: 17.0.9


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

@ngneat/overview 4.0.0 release breaks helipopper install

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

As of the release of @ngneat/overview 4.0.0, installing helipopper now pulls down version 4, instead of version 3.0 due to the dependency being configured as >=3.0.0 instead of ^3.0.0

This manifests as a TIPPY_REF injection error due to the call signature for providing the injector changing.

Expected behavior

Compatible 3.x version should be pulled, and TIPPY_REF error not observed.

Minimal reproduction of the problem with instructions

Run the playground app with a new package.json and package.lock.json, using the npm install from the README. Clicking the popup from service will generate the error

Environment

Angular version: 15.1.1


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 109.0
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v18.2.1
- Platform:  Windows

Different Dependency resolution behavior between 9.1.0 and 9.2.0

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[X] Support request
[ ] Other... Please describe:

Current behavior

On version 9.2.0 components further down the injection tree, that are rendered inside of a template passed to tippy, ([tp]='template') can resolve decencies further up the tree when using the @Host() injection modifier. This was not the case in v9.1.0. In the 9.1 version these components couldn't see things provided further up the tree. We noticed this with ngModels and the Angular Reactive Forms formGroup directive in our production app.

Expected behavior

This issue is to discuss what the expected behavior should be (v9.2.0 or v9.1.0). I am by no means an expert on Angular DI but the behavior in v9.1.0 seems to make more sense to me.

Minimal reproduction of the problem with instructions

I was able to write up a reproduction repo here.
There are two branches bug-exists-on-9-2-1 and bug-not-existant-in-9-1-0 which are based on tags v9.2.0 and v9.1.0

There is an directive appDirectiveProvidingValue that provides 🚀 for the injection token VALUE_PROVIDER. There is a component ComponentUsingValue that injects VALUE_PROIVDER and prints the value to the console.

Steps to reproduce:

1. Clone repo and check out bug-not-existant-in-9-1-0
2. Run npm install && npm run start
3. Navigate to /injection-context-seems-off
4. Click button the page.
5. Observe the value printed to the console is null.
6. Checkout bug-exists-on-9-2-1
7. Click the button again.
8. Observe the value printed to the console is 🚀 instead of null

What is the motivation / use case for changing the behavior?

Environment

Angular version: 17.0.4

Browser:
- [X] Chrome (desktop) version 122.0.6261.129 (Official Build) (arm64) (MacOS)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v21.5.0
- Platform: MacOs 14.2.1

IE 11 support

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report 
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I see we are using tippy js which supports IE 11 with polyfills, currently helipopper is compiling for es2015.
can we compile it for es5 so that we can have support for IE (Why is IE immortal?).
At least app targeting es5 should compile with package installed as we are targeting es5 (functionality breaking are ok).
This will also require changes in @ngneat/overview

Angular version: 9.2

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [X] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 10.17.0
- Platform:  Windows

Overflow doesn't add theme to tippy

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When onlyTextOverflow is set to true and text changes so it starts overflowing, displayed tippy has wrong theme and probably other properties as well.
It seems that when any input changes all properties are reset to only newly changed ones here

Also another issue found during creating Stackblitz example is that when only text changes and not width of element, tippy does not react to this change. I had to change tippy width via renderer to see the tippy.

Expected behavior

Correctly styled tippy displayed after overflow.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-ivy-xflxfu?file=src%2Fapp%2Fapp.component.ts

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [X] Chrome (desktop) version 95.0.4638.54
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Passing inputs to tippyService when dynamically instantiating a component ?

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I don't know how to pass inputs with tippyService, it's not specified in the docs, nor it is evident from implementation.

Expected behavior

It should be possible to pass some input to components created using TippyService.

Minimal reproduction of the problem with instructions

I am using it with fullcalendar / eventDidMount. It creates the component without inputs no problem. Problem is when I want to pass inputs to it.

This has no effect:

eventDidMount: info => {
  this.tippyService.create(info.el, TooltipContainerComponent, {
    data: 'data',
    context: 'context'
  });
}

// component is defined like this
export class TooltipContainerComponent {
  @Input() data: string = '';
  @Input() context: string = '';
}

// template
<p>tooltip-container works! {{ data }} {{ context }}</p>

What is the motivation / use case for changing the behavior?

Passing components as content is a lot less useful without inputs.

Environment

Angular version: 17


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 18
- Platform: Windows

Update schematics

Add to the ng add command the installation of @ngneat/overview.

multiple variations of contextMenu

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

If I try to define two different variations of a contextMenu, only the one having name 'contextMenu' will work. The other is ignored.

Expected behavior

Both contextMenus should work.

Minimal reproduction of the problem with instructions

  variations: {
    contextMenu: withContextMenuVariation(popperVariation),
    contextMenuCustom: withContextMenuVariation({...popperVariation, plugins: [myPlugin] }),

What is the motivation / use case for changing the behavior?

In my app I have a page where the content menu should be closed programmatically, through a plugin.
But in the rest of the app, the regular contextMenu variation should be used.

i think it all bolis down to the fact that there can be only one flavor of contextMenu, the one named 'contextMenu': see
https://github.com/ngneat/helipopper/blob/master/projects/ngneat/helipopper/src/lib/tippy.directive.ts#L266

Environment

Angular version: 13


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Options context gets overwritten.

Hi,

I cannot get template context to work. Does not this get overwritten?

helipopper/projects/ngneat/helipopper/src/lib/tippy.service.ts

Line 33 in 5502724

instance.view = this.view.createView(content, { ...options, ...instance.$viewOptions });

Error for window and document not defined on SSR apps

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Having helipopper on code that's also server-side rendered generates this error:

const hasSupport = 'IntersectionObserver' in window;
                                             ^

ReferenceError: window is not defined

Expected behavior

It should run with no errors

Minimal reproduction of the problem with instructions

Have an app with helipopper that is SSRed.

Environment

Angular version:9.1.12
nguniversal: 9.1.1

Additional Info

I think the lib should have checks for undefined window and document in order for these errors to be surpassed. You don't have to do anyting special for SSR since, the tooltip it self won't be used on the SS rendered page. It's just that, since the code is running from the import itself, it simply unusable on SSR apps.
Providing "dummy" window and document via webpack.ProvidePlugin, as a workaround, does not work either, since it creates implications on other libs also.

Animations in with popover variant

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Currently the popover variant has no animation, and adding the animation name to the variant also doesn't result in changes.

Expected behavior

I would like to be able to use animations for popovers.

Minimal reproduction of the problem with instructions

Add the package with the following variation:

    TippyModule.forRoot({
      defaultVariation: 'tooltip',
      variations: {
        popper: {
          ...popperVariation,
          animation: 'fade',
        },
      },

Use the popover variation.

What is the motivation / use case for changing the behavior?

Animation is a critical part of popover UX to indicate to users the origin of the item coming into view.

Environment

Angular version: 11.2.11


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

ERROR Type of content is not supported

Hi,
I'm trying to create a popup programmatically using this logic:

   const element: HTMLElement = filterElement;
  // Clear the container if needed
  this.viewContainerRef.clear();

  // Assume filters is an array of your Filter type and filter is a single Filter instance
  const componentRef = filters
    ? this.viewContainerRef.createComponent(MetadataFilterDropdownComponent)
    : this.viewContainerRef.createComponent(FilterDropdownComponent);

  // Assuming tippyService.create accepts an HTMLElement and options
  const domElem = componentRef.location.nativeElement;

  this.tippy = this.tippyService.create(element, domElem);

The component is showing up. but...
the problem I'm getting is this -
"ERROR Type of content is not supported"

I would love some help trying to understand this.

How to check if helipopper is opened

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ x] Support request
[ ] Other... Please describe:

Expected behavior

Is there a way to check if the tooltip is opened or not? Maybe with a boolean prop? This is my actual code:

  <app-icon-button
    [helipopper]="tpl"
    #contextMenu="helipopper"
    helipopperVariation="popper"
    (helipopperClose)="emitIfPopperIsOpened($event)"
  >
  </app-icon-button>

  <ng-template #tpl>
     MY CONTENT
    ....
    <button (click)="contextMenu.hide(); openModal('my-modal')">
     {{ t('commons.actions.doSomething') }}
    </button>
  </ng-template>

What is the motivation / use case for changing the behavior?

I am using helipopper on a selectable table row component and I need to know the current status of tooltip (shown/hidden) to avoid the selection on that table row.

Thanks in advance.

Environment

Angular version: 10.1.0


Browser:
- [ x] Chrome (desktop) version 85
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 12.18.2  
- Platform:  mac

Others: