Merge pull request #3 from TheCodeRaccoons/Update]-Tooltip-refactory

[Update] Refactoring tooltip script

Author: JorchCortez

Dist/Functional/Tooltip.css

@@ -0,0 +1,101 @@
+[wt-tooltip-content]:not([wt-tooltip-content=""]) {
+    position: relative;
+}
+
+[wt-tooltip-content]:not([wt-tooltip-content=""])::after {
+    content: attr(wt-tooltip-content);
+    position: absolute;
+    box-sizing: border-box;
+    left: 50%;
+    bottom: 100%;
+    transform: translateX(-50%) scale(0);
+    transform-origin: bottom center;
+    z-index: 1070;
+    margin: 0 0 10px;
+    padding: 8px 11px;
+    font-size: 14px;
+    line-height: 1em;
+    color: white;
+    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
+    white-space: nowrap;
+    pointer-events: none;
+    background-color: rgba(64, 64, 64, 0.75);
+    border-radius: 3px;
+    opacity: 0;
+    transition: all 0.08s ease;
+}
+
+[wt-tooltip-content]:not([wt-tooltip-content=""]):hover::after {
+    transform: translateX(-50%) scale(1);
+    opacity: 1;
+}
+
+[wt-tooltip-content]:not([wt-tooltip-content=""])::before {
+    content: "";
+    box-sizing: border-box;
+    width: 14px;
+    height: 7px;
+    position: absolute;
+    top: -10px;
+    left: 50%;
+    transform: scale(0);
+    transform-origin: top center;
+    z-index: 1070;
+    margin-left: -7px;
+    border-top: 7px solid rgba(64, 64, 64, 0.75);
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    opacity: 0;
+    transition: all 0.08s ease;
+}
+
+[wt-tooltip-content]:not([wt-tooltip-content=""]):hover::before {
+    transform: scale(1);
+    opacity: 1;
+}
+
+[wt-tooltip-content]:not([wt-tooltip-content=""])[wt-tooltip-position~=bottom]::after {
+    top: 100%;
+    bottom: auto;
+    margin: 10px 0 0;
+    transform-origin: top center;
+}
+
+[wt-tooltip-content]:not([wt-tooltip-content=""])[wt-tooltip-position~=align-right]::after,
+[wt-tooltip-content]:not([wt-tooltip-content=""])[wt-tooltip-position~=align-left]::after {
+    transform: scale(0);
+    -webkit-backdrop-filter: blur(1px);
+}
+
+[wt-tooltip-content]:not([wt-tooltip-content=""])[wt-tooltip-position~=align-right]:hover::after,
+[wt-tooltip-content]:not([wt-tooltip-content=""])[wt-tooltip-position~=align-left]:hover::after {
+    transform: scale(1);
+}
+
+[wt-tooltip-content]:not([wt-tooltip-content=""])[wt-tooltip-position~=align-right]::after {
+    margin-left: -16px;
+    transform-origin: left top;
+}
+
+[wt-tooltip-content]:not([wt-tooltip-content=""])[wt-tooltip-position~=align-left]::after {
+    right: 50%;
+    left: auto;
+    margin-right: -16px;
+    transform-origin: right top;
+}
+
+[wt-tooltip-content]:not([wt-tooltip-content=""])[wt-tooltip-position~=bottom]::before {
+    bottom: -10px;
+    top: auto;
+    transform-origin: center bottom;
+    border-bottom: 7px solid rgba(64, 64, 64, 0.75);
+    border-top: none;
+}
+
+[wt-tooltip-content]:not([wt-tooltip-content=""])[wt-tooltip-position~=align-left][wt-tooltip-position~=bottom]::after {
+    transform-origin: left top;
+}
+
+[wt-tooltip-content]:not([wt-tooltip-content=""])[wt-tooltip-position~=align-right][wt-tooltip-position~=bottom]::after {
+    transform-origin: right top;
+}

README.md

@@ -14,6 +14,9 @@
 	<a href="https://github.com/TheCodeRaccoons/WebflowTrickery/stargazers">
 		<img alt="GitHub repository stars" src="https://img.shields.io/github/stars/TheCodeRaccoons/WebflowTrickery?color=%2360be86&label=github%20stars&style=for-the-badge">
 	</a>
+	<a href="#">
+		<img alt="GitHub License" src="https://img.shields.io/github/license/TheCodeRaccoons/WebflowTrickery?color=%2360be86&style=for-the-badge">
+	</a>
 </p>
 <br />
 <div align="center">