Tooltip bug fixes

changelog.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## v1.6.1
+- Tooltip changes for accessibility 
+
 ## v1.6.0
 - New, cleaner, UI:
 	- Controls are now overlaid, maintaining the video's ratio and making sizing easier

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "http://plyr.io",
   "main": "src/js/plyr.js",

readme.md

@@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
 ## Implementation
 Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
 
-**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.6.0/plyr.js` to `https://cdn.plyr.io/1.6.0/plyr.js`
+**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.6.1/plyr.js` to `https://cdn.plyr.io/1.6.1/plyr.js`
 
 ### Node Package Manager (NPM)
 [![npm version](https://badge.fury.io/js/plyr.svg)](https://badge.fury.io/js/plyr) 
@@ -73,11 +73,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
 If you want to use our CDN, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.6.0/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/1.6.1/plyr.css">
-<script src="https://cdn.plyr.io/1.6.0/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.1/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.0/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.1/sprite.svg`.
 
 ### CSS & Styling
 If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.scss` file included in `/src` in your build to save a request.
@@ -115,7 +115,7 @@ Using AJAX means you can load the sprite from a different origin. Avoiding the i
 		c.innerHTML = a.responseText;
 		b.insertBefore(c, b.childNodes[0]);
 	};
-})(document, 'https://cdn.plyr.io/1.6.0/sprite.svg');
+})(document, 'https://cdn.plyr.io/1.6.1/sprite.svg');
 </script>
 ```
 
@@ -190,7 +190,7 @@ Be sure to [validate your caption files](https://quuz.org/webvtt/)
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.6.0/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.1/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.6.0
+// plyr.js v1.6.1
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/less/plyr.less

@@ -421,7 +421,6 @@
 // Tooltips
 // --------------------------------------------------------------
 .plyr__tooltip {
-    visibility: hidden;
     position: absolute;
     z-index: 2;
     bottom: 100%;
@@ -441,7 +440,7 @@
 
     transform: translate(-50%, 10px) scale(.8);
     transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
+    transition: transform .2s .1s ease, opacity .2s .1s ease;
 
     // Arrows
     &::before {
@@ -464,7 +463,6 @@
 .plyr button:hover .plyr__tooltip,
 .plyr button.tab-focus:focus .plyr__tooltip,
 .plyr__tooltip--visible {
-    visibility: visible;
     opacity: 1;
     transform: translate(-50%, 0) scale(1);
 }

src/scss/plyr.scss

@@ -421,7 +421,6 @@
 // Tooltips
 // --------------------------------------------------------------
 .plyr__tooltip {
-    visibility: hidden;
     position: absolute;
     z-index: 2;
     bottom: 100%;
@@ -441,7 +440,7 @@
 
     transform: translate(-50%, 10px) scale(.8);
     transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
+    transition: transform .2s .1s ease, opacity .2s .1s ease;
 
     // Arrows
     &::before {
@@ -464,7 +463,6 @@
 .plyr button:hover .plyr__tooltip,
 .plyr button.tab-focus:focus .plyr__tooltip,
 .plyr__tooltip--visible {
-    visibility: visible;
     opacity: 1;
     transform: translate(-50%, 0) scale(1);
 }