enable tooltip to be used on non-block elements

Financial-Times · Mar 28, 2017 · 2202948 · 2202948
1 parent b51da6d
commit 2202948
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/components/n-ui/tooltip/index.js b/components/n-ui/tooltip/index.js
@@ -78,7 +78,9 @@ export class NToolTip{
 	}
 
 	position (){
-		let left = (this.el.offsetLeft - (this.tooltip.offsetWidth / 2));
+		const elRect = this.el.getClientRects()[0];
+		const parentRect = this.el.parentNode.getClientRects()[0];
+		let left = (elRect.left - parentRect.left) + (elRect.width / 2) - (this.tooltip.offsetWidth / 2);
 		// the magic 15 is to account for the triangle
 		let top = (this.el.offsetTop + this.el.clientHeight + 15);
 		if(left < 20){

diff --git a/components/n-ui/tooltip/main.scss b/components/n-ui/tooltip/main.scss
@@ -35,7 +35,7 @@ $triangle-size:15px;
 		content: "";
 		position: absolute;
 		top: -30px;
-		left: 50%;
+		left: calc(50% + 15px);
 		transform: translateX(-100%);
 		border: $triangle-size solid transparent;
 		border-bottom-color: white;