From 8619f097274d2d39394afa4531175a9dff97a57e Mon Sep 17 00:00:00 2001
From: Tyler-A <tyler.akins1999@gmail.com>
Date: Wed, 5 Aug 2020 22:39:41 -0600
Subject: [PATCH] Add styling for tooltips

---
 src/App.vue            |   1 +
 src/css/dark_theme.css |   3 ++
 src/css/tooltips.css   | 105 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 109 insertions(+)
 create mode 100644 src/css/tooltips.css

diff --git a/src/App.vue b/src/App.vue
index 4c7c93f..5a6a63b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -73,6 +73,7 @@ export default {
 
 <style>
 @import "./css/dark_theme.css";
+@import "./css/tooltips.css";
 @import "./css/inputs.css";
 
 html, body, .maximize_size {
diff --git a/src/css/dark_theme.css b/src/css/dark_theme.css
index d9e1f98..1b10be0 100644
--- a/src/css/dark_theme.css
+++ b/src/css/dark_theme.css
@@ -35,4 +35,7 @@
 
 	--missing-picture-background: var(--background);
 	--missing-picture-foreground: var(--accent2);
+
+	--tooltip-colour: #000000;
+	--tooltip-text: var(--spotify-green);
 }
\ No newline at end of file
diff --git a/src/css/tooltips.css b/src/css/tooltips.css
new file mode 100644
index 0000000..3804a85
--- /dev/null
+++ b/src/css/tooltips.css
@@ -0,0 +1,105 @@
+.tooltip {
+	display: block !important;
+	z-index: 10000;
+}
+
+.tooltip .tooltip-inner {
+	background: var(--tooltip-colour);
+	color: var(--tooltip-text);
+	border-radius: 16px;
+	padding: 5px 10px 4px;
+}
+
+.tooltip .tooltip-arrow {
+	width: 0;
+	height: 0;
+	border-style: solid;
+	position: absolute;
+	margin: 5px;
+	border-color: var(--tooltip-colour);
+	z-index: 1;
+}
+
+.tooltip[x-placement^="top"] {
+	margin-bottom: 5px;
+}
+
+.tooltip[x-placement^="top"] .tooltip-arrow {
+	border-width: 5px 5px 0 5px;
+	border-left-color: transparent !important;
+	border-right-color: transparent !important;
+	border-bottom-color: transparent !important;
+	bottom: -5px;
+	left: calc(50% - 5px);
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.tooltip[x-placement^="bottom"] {
+	margin-top: 5px;
+}
+
+.tooltip[x-placement^="bottom"] .tooltip-arrow {
+	border-width: 0 5px 5px 5px;
+	border-left-color: transparent !important;
+	border-right-color: transparent !important;
+	border-top-color: transparent !important;
+	top: -5px;
+	left: calc(50% - 5px);
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.tooltip[x-placement^="right"] {
+	margin-left: 5px;
+}
+
+.tooltip[x-placement^="right"] .tooltip-arrow {
+	border-width: 5px 5px 5px 0;
+	border-left-color: transparent !important;
+	border-top-color: transparent !important;
+	border-bottom-color: transparent !important;
+	left: -5px;
+	top: calc(50% - 5px);
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.tooltip[x-placement^="left"] {
+	margin-right: 5px;
+}
+
+.tooltip[x-placement^="left"] .tooltip-arrow {
+	border-width: 5px 0 5px 5px;
+	border-top-color: transparent !important;
+	border-right-color: transparent !important;
+	border-bottom-color: transparent !important;
+	right: -5px;
+	top: calc(50% - 5px);
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.tooltip.popover .popover-inner {
+	background: var(--tooltip-colour);
+	color: var(--tooltip-text);
+	padding: 24px;
+	border-radius: 5px;
+	box-shadow: 0 5px 30px rgba(black, .1);
+}
+
+.tooltip.popover .popover-arrow {
+	border-color: var(--tooltip-colour);
+}
+
+.tooltip[aria-hidden='true'] {
+	visibility: hidden;
+	opacity: 0;
+	transition: opacity .15s, visibility .15s;
+}
+
+.tooltip[aria-hidden='false'] {
+	visibility: visible;
+	opacity: 1;
+	transition: opacity .15s;
+}
\ No newline at end of file