feat: agrego el codigo compilado

tooltips.css

@@ -1,158 +1,163 @@
-/*!
- * Tooltips v3.2.0
- * Copyright 2020 zkreations
- * Daniel Abel M. (fb.com/danieI.abel)
- * Licensed under MIT (github.com/zkreations/tooltips/blob/master/LICENSE)
- */
-:root {
-  --tts-size: 14px;
-  --tts-arrow: 6px;
-  --tts-bg: rgb(0 0 0 / 90%);
-  --tts-color: #fff;
-  --tts-duration: .3s;
-  --tts-shadow: 0 2px 3px rgb(0 0 0 / 40%);
-  --tts-radius: .25em;
-}
-[class*=tts] {
+:where([data-tts]) {
   position: relative;
-  --tts-pos: calc(100% - var(--tts-space, 0px));
+  display: inline-block;
+}
+:where([data-tts])::before {
+  content: attr(aria-label);
+}
+
+[data-tts] {
+  --t-po: calc(100% - var(--t-tt));
+  --t-bg: var(--tts-background, rgba(0, 0, 0, 0.9));
+  --t-arrow: var(--tts-arrow, 6px);
+  --t-offset: var(--tts-arrow-offset, 6px);
 }
-[class*=tts]::after,
-[class*=tts]::before {
+[data-tts]::before, [data-tts]::after {
   position: absolute;
-  left: 50%;
+  top: var(--t-top);
+  left: var(--t-left);
+  right: var(--t-right);
+  bottom: var(--t-bottom);
+  opacity: var(--t-op);
+  z-index: 10;
   pointer-events: none;
-  z-index: 100;
-  font-size: var(--tts-size);
-  opacity:0;
+  transform: translate(var(--t-tx, 0), var(--t-ty, 0)) scale(var(--t-ts, 1));
+  transform-origin: var(--t-to, bottom);
   transition-property: opacity, transform;
-  transition-duration: var(--tts-duration);
-  will-change: opacity, transform;
-}
-[class*=tts]::before {
-  content: attr(aria-label);
+  transition-duration: var(--tts-duration, 0.3s);
+  will-change: transform;
+}
+[data-tts]:not(:hover):not([data-tts-visible]) {
+  --t-op: 0;
+  --t-tt: var(--tts-start-translate, 0px);
+  --t-ts: var(--tts-start-scale, 1);
+}
+[data-tts]:hover, [data-tts][data-tts-visible] {
+  --t-tt: var(--tts-end-translate, 0px);
+  --t-ts: var(--tts-end-scale, 1);
+}
+[data-tts]::before {
+  font-size: var(--tts-font-size, 14px);
+  font-family: var(--tts-font-family, Roboto, sans-serif);
+  color: var(--tts-color, #fff);
+  padding: var(--tts-padding, 0.5em 0.75em);
+  border-radius: var(--tts-border-radius, 0.25em);
+  font-weight: normal;
+  line-height: 1.5;
   white-space: nowrap;
-  color: var(--tts-color);
-  font-weight: 400;
-  padding: 0.5em .75em;
-  background-color: var(--tts-bg);
-  border-radius: var(--tts-radius);
-  box-shadow: var(--tts-shadow);
-}
-[class*=tts]::after {
+  background-color: var(--t-bg);
+}
+[data-tts]::after {
   content: "";
   border-style: solid;
   border-color: transparent;
-  border-width: var(--tts-arrow);
-}
-/* Directions */
-/* Up */
-.tts {
-  --tx: -50%;
-  --ty: calc(var(--tts-pos) * -1);
-}
-.tts::before {
-  transform-origin: bottom;
-  top: calc(var(--tts-arrow) * -1);
-}
-.tts::after {
-  transform-origin: top;
-  top: 0;
-  border-top-color: var(--tts-bg);
+  border-width: var(--t-arrow);
+}
+
+[data-tts*=up], [data-tts=""] {
+  --t-top: 0;
+  --t-left: 50%;
+  --t-tx: -50%;
+}
+[data-tts*=up]::before, [data-tts=""]::before {
+  --t-ty: calc((var(--t-po) + var(--t-arrow)) * -1);
+}
+[data-tts*=up]::after, [data-tts=""]::after {
+  --t-to: top;
+  --t-ty: calc(var(--t-po) * -1);
+  border-top-color: var(--t-bg);
   border-bottom-width: 0;
 }
-/* Down */
-.tts\:down {
-  --tx: -50%;
-  --ty: var(--tts-pos);
+
+[data-tts*=down] {
+  --t-bottom: 0;
+  --t-left: 50%;
+  --t-tx: -50%;
 }
-.tts\:down::before {
-  transform-origin: top;
-  bottom: calc(var(--tts-arrow) * -1);
+[data-tts*=down]::before {
+  --t-to: top;
+  --t-ty: calc(var(--t-po) + var(--t-arrow));
 }
-.tts\:down::after {
-  transform-origin: bottom;
-  bottom: 0;
-  border-bottom-color: var(--tts-bg);
+[data-tts*=down]::after {
+  --t-to: bottom;
+  --t-ty: var(--t-po);
+  border-bottom-color: var(--t-bg);
   border-top-width: 0;
 }
-/* Left */
-.tts\:left {
-  --tx: calc(var(--tts-pos) * -1);
-  --ty: -50%;
-}
-.tts\:left::after,
-.tts\:left::before {
-  top: 50%;
-}
-.tts\:left::before {
-  transform-origin: right;
-  left: calc(var(--tts-arrow) * -1);
-}
-.tts\:left::after {
-  transform-origin: left;
-  left: calc(var(--tts-arrow) - 1px);
-  border-left-color: var(--tts-bg);
-}
-/* Right */
-.tts\:right {
-  --tx: var(--tts-pos);
-  --ty: -50%;
-}
-.tts\:right::after,
-.tts\:right::before {
-  top: 50%;
-  left: auto;
-}
-.tts\:right::before {
-  transform-origin: left;
-  right: calc(var(--tts-arrow) * -1);
-}
-.tts\:right::after {
-  transform-origin: right;
-  right: calc(var(--tts-arrow) - 1px);
-  border-right-color: var(--tts-bg);
-}
-/* Animations */
-/* Fade */
-[class*=tts]::after,
-[class*=tts]::before {
-  transform: translate3d(var(--tx), var(--ty), 0) scale(var(--tts-scale,1));
-}
-[class*=tts]:hover::after,
-[class*=tts]:focus::after,
-[class*=tts]:hover::before,
-[class*=tts]:focus::before {
-  opacity:1;
-  transform: translate3d(var(--tx), var(--ty), 0) scale(1);
-}
-/* Slide In */
-.tts-slideIn:not(:hover):not(:focus):not(.tts-visible) {
-  --tts-space: -1rem;
-}
-/* Slide Out */
-.tts-slideOut:not(:hover):not(:focus):not(.tts-visible) {
-  --tts-space: 1rem;
-}
-/*zoomIn*/
-.tts-zoomIn:not(.tts-visible) {
-  --tts-scale: 0.5;
-}
-/* Zoom Out */
-.tts-zoomOut:not(.tts-visible) {
-  --tts-scale: 1.4;
-}
-/* Options */
-/* Always Visible */
-.tts-visible::after,
-.tts-visible::before {
-  opacity:1;
-}
-/* Line Break */
-.tts-wrap::before {
-  white-space: normal;
-}
-/* Is it a block? */
-[class*=tts]:not(.tts-block) {
-  display: inline-block;
-}
+
+[data-tts=left] {
+  --t-left: 0;
+  --t-top: 50%;
+  --t-ty: -50%;
+}
+[data-tts=left]::before {
+  --t-to: right;
+  --t-tx: calc((var(--t-po) + var(--t-arrow)) * -1);
+}
+[data-tts=left]::after {
+  --t-to: left;
+  --t-tx: calc(var(--t-po) * -1);
+  border-left-color: var(--t-bg);
+  border-right-width: 0;
+}
+
+[data-tts=right] {
+  --t-right: 0;
+  --t-top: 50%;
+  --t-ty: -50%;
+}
+[data-tts=right]::before {
+  --t-to: left;
+  --t-tx: calc(var(--t-po) + var(--t-arrow));
+}
+[data-tts=right]::after {
+  --t-to: right;
+  --t-tx: var(--t-po);
+  border-right-color: var(--t-bg);
+  border-left-width: 0;
+}
+
+[data-tts=up-left], [data-tts=down-left] {
+  --t-left: 0;
+  --t-tx: 0;
+}
+[data-tts=up-left]::after, [data-tts=down-left]::after {
+  --t-left: var(--t-offset);
+}
+
+[data-tts=up-left]::before {
+  --t-to: bottom left;
+}
+[data-tts=up-left]::after {
+  --t-to: top left;
+}
+
+[data-tts=down-left]::before {
+  --t-to: top left;
+}
+[data-tts=down-left]::after {
+  --t-to: bottom left;
+}
+
+[data-tts=up-right], [data-tts=down-right] {
+  --t-left: auto;
+  --t-right: 0;
+  --t-tx: 0;
+}
+[data-tts=up-right]::after, [data-tts=down-right]::after {
+  --t-right: var(--t-offset);
+}
+
+[data-tts=up-right]::before {
+  --t-to: bottom right;
+}
+[data-tts=up-right]::after {
+  --t-to: top right;
+}
+
+[data-tts=down-right]::before {
+  --t-to: top right;
+}
+[data-tts=down-right]::after {
+  --t-to: bottom right;
+}