1 files changed, 87 insertions, 0 deletions
diff --git a/src/less/components/tooltips.less b/src/less/components/tooltips.less
new file mode 100644
index 00000000..0f7c0071
--- /dev/null
+++ b/src/less/components/tooltips.less
@@ -0,0 +1,87 @@
+// --------------------------------------------------------------
+// Tooltips
+// --------------------------------------------------------------
+
+.plyr__tooltip {
+    position: absolute;
+    z-index: 2;
+    bottom: 100%;
+    margin-bottom: (@plyr-tooltip-padding * 2);
+    padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5);
+    pointer-events: none;
+    opacity: 0;
+    background: @plyr-tooltip-bg;
+    border-radius: @plyr-tooltip-radius;
+    box-shadow: 0 1px 2px fade(#000, 10%);
+    color: @plyr-tooltip-color;
+    font-size: @plyr-font-size-small;
+    font-weight: @plyr-font-weight-normal;
+    line-height: 1.3;
+    transform: translate(-50%, 10px) scale(0.8);
+    transform-origin: 50% 100%;
+    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+
+    &::before {
+        // Arrows
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        left: 50%;
+        transform: translateX(-50%);
+
+        // The background triangle
+        bottom: -@plyr-tooltip-arrow-size;
+        border-right: @plyr-tooltip-arrow-size solid transparent;
+        border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg;
+        border-left: @plyr-tooltip-arrow-size solid transparent;
+        z-index: 2;
+    }
+}
+
+// Displaying
+.plyr .plyr__control:hover .plyr__tooltip,
+.plyr .plyr__control.tab-focus .plyr__tooltip,
+.plyr__tooltip--visible {
+    opacity: 1;
+    transform: translate(-50%, 0) scale(1);
+}
+
+.plyr .plyr__control:hover .plyr__tooltip {
+    z-index: 3;
+}
+
+// First tooltip
+.plyr__controls > .plyr__control:first-child .plyr__tooltip,
+.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
+    left: 0;
+    transform: translate(0, 10px) scale(0.8);
+    transform-origin: 0 100%;
+
+    &::before {
+        left: (@plyr-control-icon-size / 2) + @plyr-control-padding;
+    }
+}
+
+// Last tooltip
+.plyr__controls > .plyr__control:last-child .plyr__tooltip {
+    right: 0;
+    transform: translate(0, 10px) scale(0.8);
+    transform-origin: 100% 100%;
+
+    &::before {
+        left: auto;
+        right: (@plyr-control-icon-size / 2) + @plyr-control-padding;
+        transform: translateX(50%);
+    }
+}
+
+.plyr__controls > .plyr__control:first-child,
+.plyr__controls > .plyr__control:first-child + .plyr__control,
+.plyr__controls > .plyr__control:last-child {
+    &:hover .plyr__tooltip,
+    &.tab-focus .plyr__tooltip,
+    .plyr__tooltip--visible {
+        transform: translate(0, 0) scale(1);
+    }
+}