Improved tooltips

giannisdaras · Feb 19, 2018 · 19f628e · 19f628e
1 parent f4508a3
commit 19f628e
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 35 deletions.
diff --git a/public/css/app.css b/public/css/app.css
@@ -12809,56 +12809,83 @@ a:hover {
   /*bug fix*/
   position: relative;
   text-decoration: none;
-  padding-top: 0.3rem;
+  pointer-events: auto;
 }
 
 [data-tooltip]:after {
   content: attr(data-tooltip);
-  font-size: 1rem;
+  font-size: 1.1rem;
   position: absolute;
-  bottom: 0%;
   left: 50%;
   background: #222222;
-  padding: 5px 15px;
+  padding: .75rem 1.25rem;
   color: white;
-  border-radius: 10px;
+  border-radius: .5rem;
   white-space: nowrap;
   opacity: 0;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
   white-space: pre-wrap;
-  text-align: justify;
+  text-align: center;
   width: 70vw !important;
   margin-left: -35vw;
+  z-index: 1000;
 }
 
 [data-tooltip]:before {
   content: "";
   position: absolute;
   width: 0;
   height: 0;
-  border-top: 20px solid #222222;
-  border-left: 20px solid transparent;
-  border-right: 20px solid transparent;
+  border-left: 16px solid transparent;
+  border-right: 16px solid transparent;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
   opacity: 0;
   left: 50%;
+  margin-left: -8px;
+  z-index: 1000;
+}
+
+[data-tooltip]:hover:after,
+[data-tooltip]:hover:before {
+  opacity: 1;
+}
+
+[data-tooltip].tooltip-top:after {
+  bottom: 0%;
+}
+
+[data-tooltip].tooltip-top:before {
   bottom: 90%;
-  margin-left: -10px;
+  /* arrow pointing down */
+  border-top: 16px solid #222222;
+}
+
+[data-tooltip].tooltip-top:hover:after {
+  bottom: calc(100% + 16px);
 }
 
-[data-tooltip]:hover:after {
+[data-tooltip].tooltip-top:hover:before {
   bottom: 100%;
 }
 
-[data-tooltip]:hover:before {
-  bottom: 70%;
+[data-tooltip].tooltip-bottom:after {
+  top: 0%;
 }
 
-[data-tooltip]:hover:after,
-[data-tooltip]:hover:before {
-  opacity: 1;
+[data-tooltip].tooltip-bottom:before {
+  top: 90%;
+  /* arrow pointing up */
+  border-bottom: 16px solid #222222;
+}
+
+[data-tooltip].tooltip-bottom:hover:after {
+  top: calc(100% + 8px);
+}
+
+[data-tooltip].tooltip-bottom:hover:before {
+  top: calc(100% - 8px);
 }
 
 /* NAVIGATION MENU */

diff --git a/public/js/app.js b/public/js/app.js
@@ -834,6 +834,7 @@ __webpack_require__(41);
 __webpack_require__(42);
 __webpack_require__(43);
 __webpack_require__(44);
+__webpack_require__(55);
 
 /***/ }),
 /* 10 */
@@ -37785,5 +37786,33 @@ $(document).ready(function () {
 
 // removed by extract-text-webpack-plugin
 
+/***/ }),
+/* 46 */,
+/* 47 */,
+/* 48 */,
+/* 49 */,
+/* 50 */,
+/* 51 */,
+/* 52 */,
+/* 53 */,
+/* 54 */,
+/* 55 */
+/***/ (function(module, exports) {
+
+$(document).ready(function () {
+
+	$(document).on("mouseover", "[data-tooltip]", function () {
+
+		var y = $(this)[0].getBoundingClientRect().top,
+		    wh = $(window).height(),
+		    elh = $(this).outerHeight();
+		if (y + elh / 2 < wh / 2) {
+			$(this).removeClass("tooltip-top").addClass("tooltip-bottom");
+		} else {
+			$(this).removeClass("tooltip-bottom").addClass("tooltip-top");
+		}
+	});
+});
+
 /***/ })
 /******/ ]);
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -53,3 +53,4 @@ require('./nav-scroll');
 require('./contact');
 require('./lang-switch');
 require('./eu-cookie');
+require('./tooltip');
diff --git a/resources/assets/js/team.js b/resources/assets/js/team.js
diff --git a/resources/assets/js/tooltip.js b/resources/assets/js/tooltip.js
@@ -0,0 +1,16 @@
+$(document).ready(function() {
+
+	$(document).on("mouseover", "[data-tooltip]", function() {
+
+		var y = $(this)[0].getBoundingClientRect().top,
+			wh = $(window).height(),
+			elh = $(this).outerHeight()
+		if(y + elh / 2 < wh / 2) {
+			$(this).removeClass("tooltip-top").addClass("tooltip-bottom")
+		} else {
+			$(this).removeClass("tooltip-bottom").addClass("tooltip-top")
+		}
+
+	})
+
+})
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -38,55 +38,78 @@ a {
 /* tooltip */
 
 [data-tooltip] {
-
 	display: inline-block; /*bug fix*/
 	position: relative;
 	text-decoration: none;
-	padding-top: 0.3rem;
+	pointer-events: auto;
 }
 [data-tooltip]:after {
 	content: attr(data-tooltip);
-	font-size: 1rem;
+	font-size: 1.1rem;
 	position: absolute;
-	bottom: 0%;
 	left: 50%;
 	background: $brand-secondary;
-	padding: 5px 15px;
+	padding: .75rem 1.25rem;
 	color: white;
-	border-radius: 10px;
+	border-radius: .5rem;
 	white-space: nowrap;
 	opacity: 0;
 	transition: all 0.5s ease;
 	white-space: pre-wrap;
-	text-align: justify;
+	text-align: center;
 	width: 70vw !important;
 	margin-left: -35vw;
-
+	z-index: 1000;
 }
 [data-tooltip]:before {
 	content: "";
 	position: absolute;
 	width: 0;
 	height: 0;
-	border-top: 20px solid $brand-secondary;
-	border-left: 20px solid transparent;
-	border-right: 20px solid transparent;
+	border-left: 16px solid transparent;
+	border-right: 16px solid transparent;
 	transition: all 0.5s ease;
 	opacity: 0;
 	left: 50%;
-	bottom: 90%;
-	margin-left: - 10px;
-}
-[data-tooltip]:hover:after {
-	bottom: 100%;
-}
-[data-tooltip]:hover:before {
-	bottom: 70%;
+	margin-left: -8px;
+	z-index: 1000;
 }
 [data-tooltip]:hover:after,
 [data-tooltip]:hover:before {
 	opacity: 1;
 }
+[data-tooltip].tooltip-top {
+	&:after {
+		bottom: 0%;
+	}
+	&:before {
+		bottom: 90%;
+		/* arrow pointing down */
+		border-top: 16px solid $brand-secondary;
+	}
+	&:hover:after {
+		bottom: calc(100% + 16px);
+	}
+	&:hover:before {
+		bottom: 100%;
+	}
+}
+[data-tooltip].tooltip-bottom {
+	&:after {
+		top: 0%;
+	}
+	&:before {
+		top: 90%;
+		/* arrow pointing up */
+		border-bottom: 16px solid $brand-secondary;
+	}
+	&:hover:after {
+		top: calc(100% + 8px);
+	}
+	&:hover:before {
+		top: calc(100% - 8px);
+	}
+}
 
 /* NAVIGATION MENU */