drozhzhin-n-e/ng2-tooltip-directive

The tooltip is a pop-up tip that appears when you hover over an item or click on it.

Hello

I am open to job offers. If you are interested in my open source projects, then I can quickly adapt them to your requirements or develop similar solutions for your tasks.

ng2-tooltip-directive's Issues

Not working in IE 11

Tooltip is not displaying in Modal when the browser is IE

I am using angular material modal and also using ng2-tooltip in it. but when i am openning my website in IE the tooltips inside the modal are not getting visible. I tried to find the root cause and figured out that the tooltip actually generating but getting underneath of the modal. Happening only in IE

ERROR in Metadata version mismatch for module 'ng2-tooltip-directive.d.ts', found version 4, expected 3

Initially, I didn't get any errors after I installed this library and used it in my project. Next day, when I tried to start the server, I started getting the following error message.

ERROR in Metadata version mismatch for module <project_path>/node_modules/ng2-tooltip-directive/ng2-tooltip-directive.d.ts, found version 4, expected 3.

Here is the version info.

@angular/cli: 1.3.2
node: 8.11.2os: win32 x64
@angular/animations: 4.3.6
@angular/common: 4.3.6@angular/compiler: 4.3.6@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/platform-server: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6

add new line in the tool tip

add new line in the tool tip

add html in the tooltip

How can i pass html to tooltip?

Show and Hide Method is not working

The Show and Hide Method is not working in your demo and I cant seem to get it to work in my app as I am following the exact instructions from the previous made issue of hiding the tooltip from [component.ts.]

style arrow

Hello,
I was able to style the box, but no the arrow, any idea?
Thank you!

Package does not support Angular 8

When I try to update my Angular app to version 8 I get the following messages:

Package "ng2-tooltip-directive" has an incompatible peer dependency to "@angular/common" (requires "^6.0.0-rc.0 || ^6.0.0" (extended), would install "8.2.5").
Package "ng2-tooltip-directive" has an incompatible peer dependency to "@angular/core" (requires "^6.0.0-rc.0 || ^6.0.0" (extended), would install "8.2.5").

Do we need to buy the licence to use in Application?

Currently i am using this library in my application .i saw licence has updated that we need to pay for using this .

Could you please let me know its a free or paid one.

add parentElement width and element position

Hi,
can we add a input to the directive for taking parentElement width. This will help to take the position for parent element width.

getElemPosition(){
this.elemPosition = this.elementRef.nativeElement.parentElement.getBoundingClientRect();
}

let elemWidth = this.elementRef.nativeElement.parentElement.offsetWidth;

Let me know if it is possible..

Badly Packaged Library -- Breaks AOT Compilation in Angualr 5

Using this package in an ng-clii 1.63 generated angualr 5 project works fine, but it will not work with
ng serve -aot
or ng build -prod production builds that use aot

I believe this is related to a breaking change in angular 5

angular/angular-cli#8284

The resulting error is:

Module build failed: Error: node_modules\ng2-tooltip-directive\lib\tooltip.directive.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
    at AngularCompilerPlugin.getCompiledFile (node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:653:23)
    at plugin.done.then node_modules\@ngtools\webpack\src\loader.js:467:39)
    at process._tickCallback (internal/process/next_tick.js:109:7)
 

apparently not working with angular 4

Hello

tried to add it to my project, no tooltip ever appears

Tool-tip Position in an Angular material dialog

I am using it with Angular material and some time when i open a material dialog and open tool-tip it displace its original position i.e
placement= top but it shows on out side the dialog modal on top like so much space between tool-tip and tool-tip element. it happens in all Browser but randomly
Please Help (as this is the tool-tip which fits for my project)

Can't bind to 'options' since it isn't a known property of 'button'.

<button md-icon-button tooltip="tooltipText" [options]="tooltipOptions">

AoT compilation: Directive TooltipDirective, Expected 0 arguments, but got 1.

I get this error when try to compile my library that has ng2-tooltip-directive dependency. Please, consider adding argument event: any here:

ng2-tooltip-directive/src/app/tooltip/tooltip.directive.ts

Line 212 in 02b6155

onClick(){

Another option is removing of the second argument ['$event'] from the decorator:

ng2-tooltip-directive/src/app/tooltip/tooltip.directive.ts

Line 211 in 02b6155

@HostListener('click', ['$event'])

P.S. thank you for your work.

Adding tooltip-class option not working

I'm trying to add a tooltip class using the options. It doesn't appear to be taking the class "new-tooltip-class"

// in html
<span tooltip="Here is the tooltip text" [options]="tooltipOptions" >
   Show Tool Tip
                </span>

// in controller.ts
  tooltipOptions = {
    'placement': 'left',
    'show-delay': '500',
    'tooltip-class': 'new-tooltip-class'
  };

I'm trying to change the styles of the tooltip using this newly added class. (for instance change the background-color: red)

Customizable removeElem() delay

Before 1.1.2, the removeElem fired instantly; now there's a 300ms delay:

Potential solution could be adding another attribute property to the directive. For example:

<div tooltip="Tooltip" placement="left" remove-delay="100"></div>

Not working with Angular 2 version 2.4.6

I get the renderer2 issue, looks like you forgot about the backward compatability, Angualr2 has Renderer and Angular4 has Renderer2.

ERROR: node_modules/ng2-tooltip-directive/lib/tooltip.component.d.ts(1,36): Error TS2305: Module '"node_modules/@angular/core/index"' has no exported member 'Renderer2'.

After --Prod build its giving error No component factory found for c. Did you add it to @NgModule.entryComponents?

After --Prod build, when i am trying to hovering on something that has the tooltip in it , its giving error No component factory found for c. Did you add it to @NgModule.entryComponents? followed by Cannot read property 'instance' of undefined.

I have just imported it in the module in app.module.ts file and added it in imports array.
Working fine when not doing prod build.

I think the component should be able to expose a custom fetch location API based on the mouse hovering over the target element for a while.

I think the component should be able to expose a custom fetch location API based on the mouse hovering over the target element for a while.

how to set custom font for tooltip?

how to set custom font for tooltip?

The tooltip is not deleted if the main element was deleted.

If the element on which the tooltip directive is applied is removed from dom, then the tooltip, if it was previously shown, is not deleted.
To fix this, you need to add the decorator @HostListener ("mousedown") to the method of hiding the tooltip.
Sorry, but I can not create a pull request.

You should not need to recompile .ts files in node_modules

Hello,
Happen to come across this compiler error while using your directive.

ERROR in

/node_modules/ng2-tooltip-directive/lib/tooltip.directive.ts
Module build failed: Error: Typescript emitted no output for \node_modules\ng2-tooltip-directive\lib\tooltip.directive.ts.
You should not need to recompile .ts files in node_modules.

Please contact the package author to advise them to use --declaration --outDir.
More microsoft/TypeScript#12358

For the time being, I included the node_modules folder in compile paths and it worked fine.

display input not not hiding tooltip

Expected behavior:
<span tooltip="Tooltip" placement="bottom" show-delay="500" display="false">Tooltip on top</span>
This should make Tooltip not availability for display however it doesn't work.

<span tooltip="Tooltip" placement="bottom" [options]="options">Tooltip on top</span>
Using options work. This Also bring me to another point changing options[display] doesn't seem to change the availability for display of the tooltip.

stackblitz https://stackblitz.com/edit/angular-bqjpm3

created a pull request #27

Show tooltip triggers hiding and then showing again when on the border of the target

When you move mouse to the edge of the target, the tooltip showing and hiding endlessly

Feature - Added function to open tooltip with click

I modified the code a little bit to open a tooltip with a click instead of hovering the element.
Is it something you guys are interested in? I can PR the code if so.

Thanks for the library :)

Question: it seems hide-delay config option is not working

Hi! I'm trying to set "hide-delay" value as 0, but nothing changes and i'm not sure why. Some different options in the same config are working correctly('placement' and 'animation-duration'). Hope you can help me :) Is there any way to hide tooltip immediately after pointer moved away from element?
Thanks!

Line break for tooltip

Feature request: Able to take in
or \n in for the tooltip.
For example: tooltip="click to open menu \n drag to move item"

Tooltip is displayed on mobile despite display-mobile option being set to false

The displayMobile setter only sets value if it's truthy, hence false cannot be set:

if (value) {
this._options['display-mobile'] = value;
}

Make a suggestion

Sometimes this black background is very different from my project,the background color can be used to customize the configuration.

bug: the tooltip doesn't disappear in a case

bug: if the tooltip is shown and the related dom element is destroyed/removed (ie. the page changes) then the tooltip remains fixed and cannot be removed anymore.

proposed fix: add "this.destroyTooltip();" in the "ngOnDestroy()" method.

Show delay breaks click trigger

This works:

<span tooltip="Some Value" trigger="click">

Now add a show-delay:

<span tooltip="Some Value" trigger="click" show-delay="100">

The tooltip won't pop up when you add the show delay, it doesn't even get added to the DOM tree. I'm not sure if this is by design, but it's something I ran into.

Tool tip Doesn't display on Hover

Hi,

Thanks for the great work on this tooltip. This is a life saver for many of us.

I have cloned this repo and tried to run it locally. On the rendered page, i do not get the tooltip on hover, It shows on click. Also the same behavior is seen when i include it in my project.

I have this as my options:
'animation-duration': 300, 'animation-duration-default': 300, 'trigger': 'hover', 'tooltip-class': '', 'display': true, 'display-mobile': true,

usage:
<div *ngIf="alertAvailble else noAlert" tooltip="Lorem ipsum dolor sit amet, his ut dicunt recteque ea." placement="top">some content here </div> <ng-template #noAlert>--</ng-template>

can you let me know what i am missing?

Tooltip not disappearing on clicking outside of the tooltip content

When giving trigger="click", tooltip does not disappear on clicking outside of the tooltip content

Popover Component?

Great tooltip component! I am using it now in an Angular Hybrid application that also uses ui-bootstrap on the angularJs side. I'm unable to use ng-bootstrap due to conflicting CSS versions of the Bootstrap library. Your directive has been a great drop-in replacement.

I also am upgrading a component that needs a popover type functionality. I see I can use this tooltip with click to trigger, render HTML content in the tooltip, but then can not interact with links within the tooltip.

Any idea when the popover component will be ready. I see on your website it says it is in progress. Any idea of any alternatives or workarounds?

Please add maxWidth option

Tooltip does not display when the anchor is an SVG element

It's due to the fact the API is different for getting the width/height is different
I have a PR for it

Options don't work when defined in TS file

Adding options in the .ts file doesn't seem to work. I set them in the component's TypeScript file, then use them in the HTML:

ttOptions = { 'hide-delay': 300 }

And in the HTML:

<span [options] = "ttOptions">

And I still have to set them manually in the HTML because options aren't binding somehow (no errors get thrown).

Tooltip inside ngFor

Hello folks,

I implemented the tooltip directive inside a *ngFor:

  <div fxFlex class="menu-wrapper">
      <ng-container  *ngFor="let item of sideNavigationService.items; let i = index; let last = last">
        <div class="navPoint" *ngIf="item.show"  tooltip="{{item.name|translate}}" placement="right" show-delay="500" fxLayoutAlign="center center" [ngClass]="{last:last, active:item.active}" fxLayout="row" (click)="clickMenuPoint(i)">
          <div class="menuIcon mdi" [ngClass]="[item.icon]"></div>
          <div *ngIf="item.subLevel?.length > 0" class="svg-icon sublevelIcon"></div>
        </div>
    </ng-container>
  </div>

We recreate our sidenavigation array on every route change -> so ngFor will be recreate the whole sidenav. After recreating, the "old" tooltip survive this process and is still displayed.

Any idea how to avoid this behavior? 😅

Cheers 🙏

Chris

Set default values for tooltip

Hi,

is there a way to set the default settings?
For example I'd like to set show-delay to a default value of 300.
It seems cumbersome to add that option to every single tooltip in the application.

Kind regards

Tooltip disappers once tries to leave the on hover area

I have render a html content inside the tooltip. So whenever i hover it, the tooltip appears but once i tried to select the content of the tooltip it disappears. I want it to remain there after i appears.

How to increase width of tooltip?

Tooltip extends page height

The tooltip extends the page height before the position is applied.

This is noticeable in Firefox, as the tooltip element is added first on element hover, and then the position applied when hovering over the text content. The effect isn't noticeable in Chrome since the position is calculated immediately.

This has the undesirable effect of causing the scroll bar to briefly appear when the addition of the unpositioned tooltip element causes the height of the page content to extend beyond the viewport.

I am using Angular 6.04, Firefox 61.0.2, Chrome 68.0.3440.106

Doesn't work on disabled element?

When I apply the directive to a <button> element that has either the disabled attribute or a CSS property of pointer-events: none, then the tooltip won't be shown. It seems like the display of the tooltip is dependent on the cursor being in a normal state, and not any state that would be associated with a disabled element.

That's a problem, because there's a common use case of needing to display a tooltip for a disabled element, to explain why the element is disabled.

Is this something that any option on this directive can control, to enable the display?

Not working with Angular 6

After upgrading from Angular 5 to Angular 6 this directive stopped working. All I see in the log is dat it depends on specific (older) module versions. This was already the case when using Angular 5 and there the tooltips worked fine. Is there anything I can do to make de directive work with Angular 6?

Allow to pass coordinates for positioning

Currently it's not possible to pass coordinates for positioning the tooltip. This can be useful when you have for instance a map (like googlemaps), but want the tooltip to sticky to the current clicked element on the map when moving the map around.

Example: http://jsfiddle.net/goredwards/2cs4puaz/

Hide tooltip from component.ts

Hi,
is that possible to retrieve an instance of a Tooltip into the component.ts, to close the tooltip manually with hide() function?

Tooltip on hover is not working in chrome and IE

Problem with showing tooltip on chrome

On firefox works well, but on chrome if a set the tooltip on a div with 200x200 and i set the placement to right instead right the tooltip will be placed in the left top corner of the div. On firefox will work well.

can we show the tootltip on bottom-right and can we change the font-size of the tooltip

can we show the tootltip on bottom-right and can we change the font-size of the tooltip