a new start

_sass/tippyjs/_mixins.scss

@@ -0,0 +1,25 @@
+@mixin backdrop-transform-enter($placement) {
+  $scale: 1;
+  @if ($placement == 'top') {
+    transform: scale($scale) translate(-50%, -55%);
+  } @else if ($placement == 'bottom') {
+    transform: scale($scale) translate(-50%, -45%);
+  } @else if ($placement == 'left') {
+    transform: scale($scale) translate(-50%, -50%);
+  } @else if ($placement == 'right') {
+    transform: scale($scale) translate(-50%, -50%);
+  }
+}
+
+@mixin backdrop-transform-leave($placement) {
+  $scale: 0.2;
+  @if ($placement == 'top') {
+    transform: scale($scale) translate(-50%, -45%);
+  } @else if ($placement == 'bottom') {
+    transform: scale($scale) translate(-50%, 0);
+  } @else if ($placement == 'left') {
+    transform: scale($scale) translate(-75%, -50%);
+  } @else if ($placement == 'right') {
+    transform: scale($scale) translate(-25%, -50%);
+  }
+}

_sass/tippyjs/_vars.scss

@@ -0,0 +1,6 @@
+$namespace-prefix: '__NAMESPACE_PREFIX__' !default;
+$placements: 'top', 'bottom', 'left', 'right';
+$origins: bottom, top, right, left;
+$backdrop-origins: 0% 25%, 0% -50%, 50% 0%, -50% 0%;
+$backdrop-border-radii: 40% 40% 0 0, 0 0 30% 30%, 50% 0 0 50%, 0 50% 50% 0;
+$arrow-size: 16px;

_sass/tippyjs/animations/fade.scss

@@ -0,0 +1,9 @@
+@use '../_mixins.scss';
+@forward '../_vars.scss' show $namespace-prefix;
+@use '../_vars.scss';
+
+.#{vars.$namespace-prefix}-box {
+  &[data-animation='fade'][data-state='hidden'] {
+    opacity: 0;
+  }
+}

_sass/tippyjs/index.scss

@@ -0,0 +1,91 @@
+@forward '_vars.scss' show $namespace-prefix;
+@use '_vars.scss';
+@forward 'animations/fade.scss' show $namespace-prefix;
+
+$color: #333;
+
+[data-#{vars.$namespace-prefix}-root] {
+  max-width: calc(100vw - 10px);
+}
+
+.#{vars.$namespace-prefix}-box {
+  position: relative;
+  background-color: $color;
+  color: white;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1.4;
+  outline: 0;
+  transition-property: transform, visibility, opacity;
+
+  &[data-placement^='top'] > .#{vars.$namespace-prefix}-arrow {
+    bottom: 0;
+
+    &::before {
+      bottom: -7px;
+      left: 0;
+      border-width: 8px 8px 0;
+      border-top-color: initial;
+      transform-origin: center top;
+    }
+  }
+
+  &[data-placement^='bottom'] > .#{vars.$namespace-prefix}-arrow {
+    top: 0;
+
+    &::before {
+      top: -7px;
+      left: 0;
+      border-width: 0 8px 8px;
+      border-bottom-color: initial;
+      transform-origin: center bottom;
+    }
+  }
+
+  &[data-placement^='left'] > .#{vars.$namespace-prefix}-arrow {
+    right: 0;
+
+    &::before {
+      border-width: 8px 0 8px 8px;
+      border-left-color: initial;
+      right: -7px;
+      transform-origin: center left;
+    }
+  }
+
+  &[data-placement^='right'] > .#{vars.$namespace-prefix}-arrow {
+    left: 0;
+
+    &::before {
+      left: -7px;
+      border-width: 8px 8px 8px 0;
+      border-right-color: initial;
+      transform-origin: center right;
+    }
+  }
+
+  &[data-inertia][data-state='visible'] {
+    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+  }
+}
+
+.#{vars.$namespace-prefix}-arrow {
+  & {
+    width: vars.$arrow-size;
+    height: vars.$arrow-size;
+    color: $color;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+}
+
+.#{vars.$namespace-prefix}-content {
+  position: relative;
+  padding: 5px 9px;
+  z-index: 1;
+}