2

I would like to hide the current time tooltip in videojs v5. It can be identified in css using .video-js .vjs-progress-control .vjs-play-progress:after. However, hiding it also hides the completed part of the progress bar.

Is there a way to hide the current time tooltip only?

Billybobbonnet
  • 3,047
  • 4
  • 21
  • 45

2 Answers2

4

Add this class to disable only the current time tooltip: 

.video-js .vjs-progress-control:hover .vjs-play-progress:after {
    display:none;
}

Note the added :hover which is what hides the tooltip only.

Broonix
  • 1,125
  • 2
  • 13
  • 25
  • 1
    I tried this but it does not work. My exact use case is as follows: when a sibling element is hovered (the rangeslider plugin), I want to hide the current time tooltip. I use the `mouseenter` and `mouseleave` events to add and remove a class named `hide` to `.vjs-play-progress` and use the following selector: `.video-js .vjs-progress-control:hover .vjs-play-progress.hide:after` – Billybobbonnet Nov 12 '15 at 16:54
  • Which one of these two do you want to hide? 14 or 15? http://i.imgur.com/yDrEBtM.png – Broonix Nov 12 '15 at 17:31
  • http://jsfiddle.net/w91vvjy0/3/ here is a fiddle showing it hiding one or both time popups. – Broonix Nov 12 '15 at 17:39
  • I want to hide 14. Looking at your fiddle, I can see that it should work, but in my case it isn't: the active part of the progress bar also disappear (probably because of one of my plugins). I guess you answered the question. I'll validate it and keep you posted on the real reason, if I can find it. Thanks for your help. – Billybobbonnet Nov 12 '15 at 17:53
3

This works for me (I tried with videojs 5.9)

/* hide time display on progress bar on the mouse position */
.video-js .vjs-progress-control:hover .vjs-mouse-display,
/* hide time display on progress bar on the current play position */
.video-js .vjs-progress-holder .vjs-play-progress {
   display: none; 
}
vrtx54234
  • 1,964
  • 3
  • 28
  • 48