Mouseover issue with WP video player

  • Resolved jeditricks

    (@jeditricks)


    7 years, 2 months ago

    Hello Nobita,

    I just noticed that Raindrops is causing an issue with WordPress video player, the volume control specifically, one that other themes do not.

    The issue is that the way Raindrops affects the mouseover tooltip for “Mute” on the volume slider, it causes the user to be unable to actually use the volume slider. Mousing over the control’s volume button has the tooltip pop up above it to cover the option it’s controlling, instead of displaying below it the way other themes show it, and when the user moves the cursor to use the control (moving the volume slider), the control disappears since the focus has been changed to the tooltip rather than the control itself.

    This issue also affects additional option controls on the video player bar added by plugins such as video quality switching options, or closed captions.

    Is there an option for this, or a way to fix it with css or a code change?

    Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author nobita

    (@nobita)

    Hi @jeditricks

    Does the problem occur only with the video widget?
    Or has it also happened with oembed media?

    Thank you.

    Thread Starter jeditricks

    (@jeditricks)

    When both are using the WordPress player via either the [video] tag from an uploaded file, or [embed] from an external file, the player and tool tip behavior is the same.

    Theme Author nobita

    (@nobita)

    Please try

    change function raindrops_add_tooltip_script()

    https://github.com/tenman/raindrops/blob/master/functions.php#L1983-L2007

    Paste your functions.php. (Add to first line)

    
<?php
function raindrops_add_tooltip_script() { // PASTE START

	global $raindrops_tooltip, $wp_scripts;

	if ( $raindrops_tooltip == true && 'yes' == raindrops_warehouse_clone( 'raindrops_tooltip' ) ) {

		wp_enqueue_script( 'jquery-ui-tooltip' );
		$js = "jQuery(function() {
					jQuery( document ).tooltip({position: {
						my: 'center', at: 'top-30', collision: 'none'
					}});
					jQuery('.widget_media_video, .wp-video').tooltip({position:{
						my: 'center', at: 'bottom+30', collision: 'none'
					}});
					jQuery('.widget_media_video, .wp-video').tooltip('option', 'tooltipClass','bottom-tooltip' );
				});";
		$wp_scripts->add_data( 'jquery-ui-tooltip', 'data', $js );
	}
} // PASTE END
/**
 *
 *
 * @package Raindrops
 * @since Raindrops 0.1
 */
if ( !defined( 'ABSPATH' ) ) {
	exit;
}
do_action( 'raindrops_before' );
...

    and change style.css

    https://github.com/tenman/raindrops/blob/master/style.css#L6496-L6499

    
.ui-tooltip-content:before{
    border: 10px solid transparent;
    border-top: 10px solid #333;
}
/* above after Add blow style */
.bottom-tooltip .ui-tooltip-content:before{
    content:'';
    border:none;   
}

    Please try parent theme.

    If you have good results and reply from you on this change
    Include this change in the next update

    Thank you

    • This reply was modified 7 years, 2 months ago by nobita.
    Thread Starter jeditricks

    (@jeditricks)

    Nobita,

    That seems to have worked, thank you for your efforts.

    When you put the change into the next theme update, might I suggest changing the direction of the tooltip arrow that now points away from the tool, or just removing the arrow entirely.

    Theme Author nobita

    (@nobita)

    In the next update, I will correct it, with arrow.

    Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mouseover issue with WP video player’ is closed to new replies.