fix(tooltip): fix arrow positioning in Bootstrap beta.3

pkozlowski-opensource · pkozlowski-opensource · commit de56f10faf48 · 2018-01-05T16:15:02.000+01:00
Fixes #2067
diff --git a/src/tooltip/tooltip.ts b/src/tooltip/tooltip.ts
@@ -34,7 +34,7 @@ let nextId = 0;
   template: `<div class="arrow"></div><div class="tooltip-inner"><ng-content></ng-content></div>`,
   styles: [`
     :host.bs-tooltip-top .arrow, :host.bs-tooltip-bottom .arrow {
-      left: 50%;
+      left: calc(50% - 0.4rem);
     }
 
     :host.bs-tooltip-top-left .arrow, :host.bs-tooltip-bottom-left .arrow {
@@ -43,20 +43,20 @@ let nextId = 0;
 
     :host.bs-tooltip-top-right .arrow, :host.bs-tooltip-bottom-right .arrow {
       left: auto;
-      right: 1em;
+      right: 0.8rem;
     }
 
     :host.bs-tooltip-left .arrow, :host.bs-tooltip-right .arrow {
-      top: 50%;
+      top: calc(50% - 0.4rem);
     }
     
     :host.bs-tooltip-left-top .arrow, :host.bs-tooltip-right-top .arrow {
-      top: 0.7em;
+      top: 0.4rem;
     }
 
     :host.bs-tooltip-left-bottom .arrow, :host.bs-tooltip-right-bottom .arrow {
       top: auto;
-      bottom: 0.7em;
+      bottom: 0.4rem;
     }
   `]
 })

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ let nextId = 0;`
`34`	`34`	template: `<div class="arrow"></div><div class="tooltip-inner"><ng-content></ng-content></div>`,
`35`	`35`	styles: [`
`36`	`36`	`:host.bs-tooltip-top .arrow, :host.bs-tooltip-bottom .arrow {`
`37`		`- left: 50%;`
	`37`	`+ left: calc(50% - 0.4rem);`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`:host.bs-tooltip-top-left .arrow, :host.bs-tooltip-bottom-left .arrow {`
`@@ -43,20 +43,20 @@ let nextId = 0;`
`43`	`43`
`44`	`44`	`:host.bs-tooltip-top-right .arrow, :host.bs-tooltip-bottom-right .arrow {`
`45`	`45`	`left: auto;`
`46`		`- right: 1em;`
	`46`	`+ right: 0.8rem;`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`:host.bs-tooltip-left .arrow, :host.bs-tooltip-right .arrow {`
`50`		`- top: 50%;`
	`50`	`+ top: calc(50% - 0.4rem);`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	`:host.bs-tooltip-left-top .arrow, :host.bs-tooltip-right-top .arrow {`
`54`		`- top: 0.7em;`
	`54`	`+ top: 0.4rem;`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`:host.bs-tooltip-left-bottom .arrow, :host.bs-tooltip-right-bottom .arrow {`
`58`	`58`	`top: auto;`
`59`		`- bottom: 0.7em;`
	`59`	`+ bottom: 0.4rem;`
`60`	`60`	`}`
`61`	`61`	`]
`62`	`62`	`})`