Keep tooltips inside

[gkatsev]

Description

Add a new option that makes the tooltips stay inside the bounds of the player.

Specific Changes proposed

The new option is keepWithin and it's part of the progressControl. A new option is required because we can't change the defaults and the changes herein would be breaking otherwise.
Basically, we create a new progress control that we use for the tooltip which we bound with min-width and max-width to be half the width of the tooltip plus player-width minus half the width of the tooltip.
Also, this is an option because the default videojs skin doesn't have the progress bar go edge-to-edge of the player, so, there's no need to do the extra computations then. But if a skin uses an edge-to-edge progress bar and likes the time tooltips, then, this will be beneficial.

This contains the first attempt at doing this as well as part of the first commit.

Requirements Checklist

• Cleanup, make sure everything looks for the keepWithin option
• Rename keepWithin to keepTooltipsInside or something
• If necessary, more likely in a feature request than a bug fix
  • Unit Tests updated or fixed
  • Docs/guides updated
  • Example created (starter template on JSBin)
• Reviewed by Two Core Contributors

[gkatsev]

This apparently doesn't work in firefox. Firefox always returns auto for the width of the tooltips whereas chrome is returning the pixel values for the width. Investigating.

[gkatsev]

I found this firefox issue while trying to create an example on plnkr http://plnkr.co/edit/91wBL105FIOLuEf9JNxG?p=preview
I also created a reduced test case for just the issue https://jsfiddle.net/pkk0dp2k/2/
And unfortunately, the answer is that an element is required since pseudo elements don't give us nearly enough information via computed style.

[gkatsev]

I believe this is ready to be reviewed now. I want to add a simple test that verifies that the correct elements are created when the option is set. Also, maybe some unit tests for some of the new methods like clampPosition.

[misteroneill]

I wonder if this would be preferable to adding to the DOM then querying it?

this.tooltip = Dom.createEl('div', {className: 'vjs-time-tooltip'});
this.el().appendChild(this.tooltip);

[gkatsev]

that's probably better.

[misteroneill]

LGTM