1 files changed, 124 insertions, 0 deletions
diff --git a/components/tooltip/_tooltip.scss b/components/tooltip/_tooltip.scss
new file mode 100644
index 0000000..3f255ed
--- /dev/null
+++ b/components/tooltip/_tooltip.scss
@@ -0,0 +1,124 @@
+/* Tooltip animation */
+@keyframes animation-fade-in-from-bottom {
+    from {
+        transform: translateY(10px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0px);
+        opacity: 1;
+    }
+}
+
+/* Tooltop styles */
+.sdc-tooltip {
+    @include base-font-regular;
+    line-height: 14px;
+    font-size: 12px;
+    max-width: 223px;
+    background-color: $black;
+    color: $white;
+    text-align: left;
+    border-radius: 2px;
+    padding: 5px 11px;
+    position: absolute;
+    z-index: 1000;
+    display: block;
+    opacity: 0;
+    transition: opacity 300ms;
+    border: solid 1px $black;
+    animation: animation-fade-in-from-bottom .75s ease-in-out; /* tooltip animation */
+}
+
+.sdc-tooltip-show {
+    opacity: 1;
+}
+
+.sdc-tooltip::after {
+    content: "";
+    position: absolute;
+    border-style: solid;
+}
+
+.sdc-tooltip-top::after {
+    top: 100%;
+    left: 10px;
+    margin-left: -5px;
+    border-width: 5px;
+    border-color: $black transparent transparent transparent;
+}
+.sdc-tooltip-top-right__bottom::after {
+    right: 10px;
+    left:auto;
+}
+.sdc-tooltip-top-center__middle::after {
+    left: 50%;
+}
+
+.sdc-tooltip-bottom::after {
+    bottom: 100%;
+    left: 10px;
+    margin-left: -5px;
+    border-width: 5px;
+    border-color: transparent transparent $black transparent;
+}
+.sdc-tooltip-bottom-right__bottom::after {
+    right: 10px;
+    left:auto;
+}
+.sdc-tooltip-bottom-center__middle::after {
+    left: 50%;
+}
+
+.sdc-tooltip-left::after {
+    top: 10px; /*50%;*/
+    left: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-color: transparent transparent transparent $black;
+}
+.sdc-tooltip-left-right__bottom::after {
+    bottom: 10px;
+    top: auto;
+}
+.sdc-tooltip-left-center__middle::after {
+    top: 50%
+}
+
+.sdc-tooltip-right::after {
+    top: 10px;
+    right: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-color: transparent $black transparent transparent;
+}
+.sdc-tooltip-right-right__bottom::after {
+    bottom: 10px;
+    top: auto;
+}
+.sdc-tooltip-right-center__middle::after {
+    top: 50%
+}
+
+/* Tooltip template */
+.sdc-tooltip-template-title {
+    @include base-font-regular;
+    font-size: 12px;
+    font-weight: normal;
+    background-color: $black;
+    color: $white; /* silver */
+}
+
+.sdc-tooltip-template-big-title {
+    font-size: 20px;
+    line-height: 24px;
+}
+
+.sdc-tooltip-template-content {
+    @include base-font-regular;
+    font-size: 12px;
+    font-weight: normal;
+    background-color: $black;
+    color: $white;
+    line-height: 14px;
+}