Merge pull request #2 from TheCodeRaccoons/JorchCortez-patch-1

Create Tooltip.css

Author: JorchCortez

Dist/Functional/Tooltip.css

@@ -0,0 +1,136 @@
+[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;
+}
+
+.svg-symbols {
+    display: none;
+}
+
+body {
+    margin: 0;
+    font-family: lato, sans-serif;
+    font-size: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    height: 100vh;
+    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/wyperfeld.jpg);
+    background-size: cover;
+    background-position: center top;
+}
+
+.example-element {
+    height: 36px;
+    width: 36px;
+    margin: 6px;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.example-element:hover {
+    color: white;
+}
+
+.example-element svg {
+    height: 100%;
+    width: 100%;
+    fill: currentColor;
+}