From 19f628e06370b1a6c6d63ad0bf3e9e11986bf0d3 Mon Sep 17 00:00:00 2001 From: Theo Diamantidis Date: Mon, 19 Feb 2018 20:22:24 +0200 Subject: [PATCH] Improved tooltips --- public/css/app.css | 59 +++++++++++++++++++++++--------- public/js/app.js | 29 ++++++++++++++++ resources/assets/js/app.js | 1 + resources/assets/js/team.js | 0 resources/assets/js/tooltip.js | 16 +++++++++ resources/assets/sass/app.scss | 61 +++++++++++++++++++++++----------- 6 files changed, 131 insertions(+), 35 deletions(-) create mode 100644 resources/assets/js/team.js create mode 100644 resources/assets/js/tooltip.js diff --git a/public/css/app.css b/public/css/app.css index a464951..1c5e1d2 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -12809,27 +12809,27 @@ 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 { @@ -12837,28 +12837,55 @@ a:hover { 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 index deacf5b..11ff9f4 100644 --- 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"); + } + }); +}); + /***/ }) /******/ ]); \ No newline at end of file diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index 4c5f2bd..3e977db 100644 --- 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'); \ No newline at end of file diff --git a/resources/assets/js/team.js b/resources/assets/js/team.js new file mode 100644 index 0000000..e69de29 diff --git a/resources/assets/js/tooltip.js b/resources/assets/js/tooltip.js new file mode 100644 index 0000000..e822fcc --- /dev/null +++ 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") + } + + }) + +}) \ No newline at end of file diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss index 18afb0b..990cb07 100644 --- 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 */