Tooltip scss

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

diff --git a/core/css/tooltip.scss b/core/css/tooltip.scss
new file mode 100644 (file)
index 0000000..4228978
--- /dev/null
+++ b/core/css/tooltip.scss
@@ -0,0 +1,125 @@
+/*!
+ * Bootstrap v3.3.5 (http://getbootstrap.com)
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+.tooltip {
+       position: absolute;
+       display: block;
+       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+       font-style: normal;
+       font-weight: normal;
+       letter-spacing: normal;
+       line-break: auto;
+       line-height: 1.42857143;
+       text-align: left;
+       text-align: start;
+       text-decoration: none;
+       text-shadow: none;
+       text-transform: none;
+       white-space: normal;
+       word-break: normal;
+       word-spacing: normal;
+       word-wrap: normal;
+       font-size: 12px;
+       opacity: 0;
+       z-index: 100000;
+       filter: alpha(opacity = 0);
+       &.in {
+               opacity: 0.9;
+               filter: alpha(opacity = 90);
+       }
+       &.top {
+               margin-top: -3px;
+               padding: 5px 0;
+       }
+       &.right {
+               margin-left: 3px;
+               padding: 0 5px;
+       }
+       &.bottom {
+               margin-top: 3px;
+               padding: 5px 0;
+       }
+       &.left {
+               margin-left: -3px;
+               padding: 0 5px;
+       }
+}
+
+.tooltip-inner {
+       max-width: 350px;
+       padding: 3px 8px;
+       color: #ffffff;
+       text-align: center;
+       background-color: #000000;
+       border-radius: 4px;
+}
+
+.tooltip-arrow {
+       position: absolute;
+       width: 0;
+       height: 0;
+       border-color: transparent;
+       border-style: solid;
+}
+
+.tooltip {
+       &.top .tooltip-arrow {
+               bottom: 0;
+               left: 50%;
+               margin-left: -5px;
+               border-width: 5px 5px 0;
+               border-top-color: #000000;
+       }
+       &.top-left .tooltip-arrow {
+               bottom: 0;
+               right: 5px;
+               margin-bottom: -5px;
+               border-width: 5px 5px 0;
+               border-top-color: #000000;
+       }
+       &.top-right .tooltip-arrow {
+               bottom: 0;
+               left: 5px;
+               margin-bottom: -5px;
+               border-width: 5px 5px 0;
+               border-top-color: #000000;
+       }
+       &.right .tooltip-arrow {
+               top: 50%;
+               left: 0;
+               margin-top: -5px;
+               border-width: 5px 5px 5px 0;
+               border-right-color: #000000;
+       }
+       &.left .tooltip-arrow {
+               top: 50%;
+               right: 0;
+               margin-top: -5px;
+               border-width: 5px 0 5px 5px;
+               border-left-color: #000000;
+       }
+       &.bottom .tooltip-arrow {
+               top: 0;
+               left: 50%;
+               margin-left: -5px;
+               border-width: 0 5px 5px;
+               border-bottom-color: #000000;
+       }
+       &.bottom-left .tooltip-arrow {
+               top: 0;
+               right: 5px;
+               margin-top: -5px;
+               border-width: 0 5px 5px;
+               border-bottom-color: #000000;
+       }
+       &.bottom-right .tooltip-arrow {
+               top: 0;
+               left: 5px;
+               margin-top: -5px;
+               border-width: 0 5px 5px;
+               border-bottom-color: #000000;
+       }
+}