feat(tooltip): add adaptivePosition option (#5204)

valor-software · May 14, 2019 · 8333e23 · 8333e23
1 parent c7f9e8c
commit 8333e23
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 19 deletions.
diff --git a/demo/src/app/components/+tooltip/demos/adaptive-position/adaptive-position.html b/demo/src/app/components/+tooltip/demos/adaptive-position/adaptive-position.html
@@ -0,0 +1,13 @@
+<button type="button" class="btn btn-default btn-secondary mb-2"
+        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        [adaptivePosition]="false"
+        placement="top">
+  Tooltip on top
+</button>
+
+<button type="button" class="btn btn-default btn-secondary mb-2"
+        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        [adaptivePosition]="false"
+        placement="right">
+  Tooltip on right
+</button>
diff --git a/demo/src/app/components/+tooltip/demos/adaptive-position/adaptive-position.ts b/demo/src/app/components/+tooltip/demos/adaptive-position/adaptive-position.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-tooltip-adaptive-position',
+  templateUrl: './adaptive-position.html'
+})
+export class DemoTooltipAdaptivePositionComponent {}
diff --git a/demo/src/app/components/+tooltip/demos/index.ts b/demo/src/app/components/+tooltip/demos/index.ts
@@ -1,3 +1,4 @@
+import { DemoTooltipAdaptivePositionComponent } from './adaptive-position/adaptive-position';
 import { DemoTooltipBasicComponent } from './basic/basic';
 import { DemoTooltipClassComponent } from './class/class';
 import { DemoTooltipConfigComponent } from './config/config';
@@ -14,6 +15,7 @@ import { DemoTooltipTriggersCustomComponent } from './triggers-custom/triggers-c
 import { DemoTooltipTriggersManualComponent } from './triggers-manual/triggers-manual';
 
 export const DEMO_COMPONENTS = [
+  DemoTooltipAdaptivePositionComponent,
   DemoTooltipBasicComponent,
   DemoTooltipClassComponent,
   DemoTooltipConfigComponent,

diff --git a/demo/src/app/components/+tooltip/tooltip-section.list.ts b/demo/src/app/components/+tooltip/tooltip-section.list.ts
@@ -1,3 +1,4 @@
+import { DemoTooltipAdaptivePositionComponent } from './demos/adaptive-position/adaptive-position';
 import { DemoTooltipBasicComponent } from './demos/basic/basic';
 import { DemoTooltipClassComponent } from './demos/class/class';
 import { DemoTooltipConfigComponent } from './demos/config/config';
@@ -53,6 +54,16 @@ export const demoComponentContent: ContentSection[] = [
           used to detect a position that fits the component on the screen.</p>`,
         outlet: DemoTooltipPlacementComponent
       },
+      {
+        title: 'Disable adaptive position',
+        anchor: 'adaptive-position',
+        description: `
+          <p>You can disable adaptive position via <code>adaptivePosition</code> input or config option</p>
+        `,
+        component: require('!!raw-loader?lang=typescript!./demos/adaptive-position/adaptive-position.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/adaptive-position/adaptive-position.html'),
+        outlet: DemoTooltipAdaptivePositionComponent
+      },
       {
         title: 'Dismiss on next click',
         anchor: 'dismiss',
@@ -129,13 +140,6 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/styling-local/styling-local.html'),
         outlet: DemoTooltipStylingLocalComponent
       },
-      /*{
-        title: 'Global styling',
-        anchor: 'styling-global',
-        component: require('!!raw-loader?lang=typescript!./demos/styling-global/styling-global.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/styling-global/styling-global.html'),
-        outlet: DemoTooltipStylingGlobalComponent
-      },*/
       {
         title: 'Custom class',
         anchor: 'custom-class',

diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -2060,7 +2060,7 @@ export const ngdoc: any = {
     "properties": [
       {
         "name": "dropdownMenu",
-        "type": "Promise<any>",
+        "type": "Promise<BsComponentRef<any>>",
         "description": "<p>Content to be displayed as popover.</p>\n"
       }
     ]
@@ -3308,6 +3308,12 @@ export const ngdoc: any = {
     "description": "<p>Default values provider for tooltip</p>\n",
     "methods": [],
     "properties": [
+      {
+        "name": "adaptivePosition",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>sets disable adaptive position</p>\n"
+      },
       {
         "name": "container",
         "type": "string",
@@ -3340,6 +3346,11 @@ export const ngdoc: any = {
     "selector": "[tooltip], [tooltipHtml]",
     "exportAs": "bs-tooltip",
     "inputs": [
+      {
+        "name": "adaptivePosition",
+        "type": "boolean",
+        "description": "<p>sets disable adaptive position</p>\n"
+      },
       {
         "name": "container",
         "type": "string",

diff --git a/src/tooltip/tooltip.config.ts b/src/tooltip/tooltip.config.ts
@@ -3,6 +3,8 @@ import { Injectable } from '@angular/core';
 /** Default values provider for tooltip */
 @Injectable()
 export class TooltipConfig {
+  /** sets disable adaptive position */
+  adaptivePosition = true;
   /** tooltip placement, supported positions: 'top', 'bottom', 'left', 'right' */
   placement = 'top';
   /** array of event names which triggers tooltip opening */

diff --git a/src/tooltip/tooltip.directive.ts b/src/tooltip/tooltip.directive.ts
@@ -30,6 +30,8 @@ let id = 0;
 })
 export class TooltipDirective implements OnInit, OnDestroy {
   tooltipId = id++;
+  /** sets disable adaptive position */
+  @Input() adaptivePosition: boolean;
   /**
    * Content to be displayed as tooltip.
    */
@@ -226,17 +228,6 @@ export class TooltipDirective implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this._positionService.setOptions({
-      modifiers: {
-        flip: {
-          enabled: true
-        },
-        preventOverflow: {
-          enabled: true
-        }
-      }
-    });
-
     this._tooltip.listen({
       triggers: this.triggers,
       show: () => this.show()
@@ -266,6 +257,17 @@ export class TooltipDirective implements OnInit, OnDestroy {
    * the tooltip.
    */
   show(): void {
+    this._positionService.setOptions({
+      modifiers: {
+        flip: {
+          enabled: this.adaptivePosition
+        },
+        preventOverflow: {
+          enabled: this.adaptivePosition
+        }
+      }
+    });
+
     if (
       this.isOpen ||
       this.isDisabled ||