feat(tooltip): add delay to config (#4928)

closes #4029

Author: fynnfeldpausch

demo/src/app/components/+tooltip/demos/config/config.ts

@@ -6,7 +6,8 @@ import { TooltipConfig } from 'ngx-bootstrap/tooltip';
 export function getAlertConfig(): TooltipConfig {
   return Object.assign(new TooltipConfig(), {
     placement: 'right',
-    container: 'body'
+    container: 'body',
+    delay: 500
   });
 }
 

demo/src/ng-api-doc.ts

@@ -1874,7 +1874,7 @@ export const ngdoc: any = {
     "properties": [
       {
         "name": "dropdownMenu",
-        "type": "Promise<BsComponentRef<any>>",
+        "type": "Promise<any>",
         "description": "<p>Content to be displayed as popover.</p>\n"
       }
     ]
@@ -3095,6 +3095,12 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>a selector specifying the element the tooltip should be appended to. Currently only supports &quot;body&quot; </p>\n"
       },
+      {
+        "name": "delay",
+        "defaultValue": "0",
+        "type": "number",
+        "description": "<p>delay before showing the tooltip </p>\n"
+      },
       {
         "name": "placement",
         "defaultValue": "top",

docs/spec/tooltip/tooltip.examples.config-defaults.use-case.md

@@ -11,7 +11,7 @@ Main success scenario:
 1. User opens Tooltip demo page
 2. User clicks on Configuring defaults sub-menu
 3. User see button "Preconfigured tooltip"
-4. When user hover on "Preconfigured tooltip", then tooltip-container shown on the right of button with specific text
+4. When user hover on "Preconfigured tooltip", then tooltip-container shown on the right of button with specific text after 500ms
 5. When user moves the mouse cursor away of tooltip-button, then tooltip-container disappeared
 6. Component src should be written with TooltipConfig and parameter: placement: "right"
 

src/spec/ng-bootstrap/tooltip.spec.ts

@@ -523,6 +523,7 @@ describe('tooltip', () => {
         config.placement = 'bottom';
         config.triggers = 'click';
         config.container = 'body';
+        config.delay = 500;
       })
     );
 
@@ -534,6 +535,7 @@ describe('tooltip', () => {
       expect(tooltip.placement).toBe(config.placement);
       expect(tooltip.triggers).toBe(config.triggers);
       expect(tooltip.container).toBe(config.container);
+      expect(tooltip.delay).toBe(config.delay);
     });
   });
 
@@ -542,6 +544,7 @@ describe('tooltip', () => {
     config.placement = 'bottom';
     config.triggers = 'click';
     config.container = 'body';
+    config.delay = 500;
 
     beforeEach(() => {
       TestBed.configureTestingModule({
@@ -557,6 +560,7 @@ describe('tooltip', () => {
       expect(tooltip.placement).toBe(config.placement);
       expect(tooltip.triggers).toBe(config.triggers);
       expect(tooltip.container).toBe(config.container);
+      expect(tooltip.delay).toBe(config.delay);
     });
   });
 });

src/tooltip/tooltip.config.ts

@@ -9,4 +9,6 @@ export class TooltipConfig {
   triggers = 'hover focus';
   /** a selector specifying the element the tooltip should be appended to. Currently only supports "body" */
   container: string;
+  /** delay before showing the tooltip */
+  delay = 0;
 }