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.
http://ivylab.space/tooltip
MIT License
100 stars 76 forks source link

Hide-delay is not working. #75

Open wasiullahtxtsol opened 5 years ago

wasiullahtxtsol commented 5 years ago

Hide-delay is not working.

ng2-tooltip-directive Version : 2.7.16

drozhzhin-n-e commented 5 years ago

@wasiullahtxtsol can you show the code you are using?

wasiullahtxtsol commented 5 years ago

In Html:

 <ul class="actions top-right">
            <li tooltip="Edit" placement="top" [hide-delay]="500">
              <a href="#"
                ><i class="icon dripicons-document-edit"></i
              ></a>
            </li>
          </ul>

And in app.module.ts

imports: [ TooltipModule.forRoot({ trigger: "hover" }) ],

I have also tried to add option hide-delay in imports but didn't work. Am i missing something? Other options are working. Thanks.

drozhzhin-n-e commented 5 years ago

@wasiullahtxtsol Try using the TooltipOptions interface as in the example https://github.com/drozhzhin-n-e/ng2-tooltip-directive#set-default-values

Note that the default delay is 300 ms. And you do not need to specify trigger: "hover", this value is set by default.

wasiullahtxtsol commented 5 years ago

Thanks for your response.

'hide-delay': 5000 is working, but 'hide-delay': 0 is not working.

export const DefaultTooltipOptions: TooltipOptions = {  
  'hide-delay': 5000,
  'placement': 'top',
  'theme': "light"
};

TooltipModule.forRoot(DefaultTooltipOptions as TooltipOptions),

  <ul class="actions top-right">
            <li tooltip="Edit">
              <a href="#"
                ><i class="icon dripicons-document-edit"></i
              ></a>
            </li>
          </ul>
drozhzhin-n-e commented 5 years ago

@wasiullahtxtsol try 'hide-delay': 1

wasiullahtxtsol commented 5 years ago

At 'hide-delay': 1, it is hiding after 2 seconds. I am trying to hide immediately after the hover is removed.

drozhzhin-n-e commented 5 years ago

@wasiullahtxtsol a two second delay is triggered by a trigger: click. If you use a click, then you need the hideDelayAfterClick property

wasiullahtxtsol commented 5 years ago

I am using default trigger which is hover and 'hide-delay:1', but still not hiding immediately.

drozhzhin-n-e commented 5 years ago

Check if you have the latest version of Tooltips installed. I do not see any problems with the delay. Keep in mind that the default settings are lower in priority than those you set in the directive.

oloflandahl commented 5 years ago

I get the same behavior as @wasiullahtxtsol in the latest version. And show-delay is not working either.

drozhzhin-n-e commented 5 years ago

@oloflandahl could you give an example of your code?

oloflandahl commented 5 years ago

I've tried both element options... <div class="ellipsis-text" [tooltip]="text" show-delay="500" hide-delay="100">{{text}}</div>

...and default module options const DEFAULT_TOOLTIP_OPTIONS: TooltipOptions = { 'show-delay': 500, 'hide-delay': 100 }; imports: [ TooltipModule.forRoot(DEFAULT_TOOLTIP_OPTIONS) ],

drozhzhin-n-e commented 5 years ago

@oloflandahl can you record on video how it works?

wasiullahtxtsol commented 5 years ago

@drozhzhin-n-e Can you please check if the hide-delay and show-delay are working on the demo page .

I have updated the tooltip to latest version which is 2.7.17, but hide-delay still not working.

drozhzhin-n-e commented 5 years ago

I updated the demo to version 2.7.17 http://ivylab.space/tooltip/demo, but there is no problem with the delay. Check if there are additional conditions that can affect the tooltip properties.

drozhzhin-n-e commented 5 years ago

Try to take the module from this repository and check what properties the directive gets here https://github.com/drozhzhin-n-e/ng2-tooltip-directive/blob/master/src/app/tooltip/tooltip.directive.ts#L137

drozhzhin-n-e commented 5 years ago

@wasiullahtxtsol @oloflandahl Also, check if you use the tooltip on the touch screen?

drozhzhin-n-e commented 5 years ago

If you use a touch screen, then try updating the library to version 2.8.17