Jump to content

Bootstrap Popover On Hover Issue


mongoose00318

Recommended Posts

I have some Bootstrap popovers I'm trying to use and they work but you have to over over the element twice?

Here is my JS:

                //initiate popover
		$('body').on('mouseover', '.btn_change_order_status_dialog', function() {
			
			if($(this).text() !== 'Not Started') {
				
				var btn = $(this);
				//perform query to determine most recent order status
				$.ajax({
					url: 'scripts/order_status.php',
					method: 'GET',
					data: {action: 'get_order_status_history_for_dept', order_id: $(this).attr('data-order-id'), dept_code: $(this).attr('data-dept-code')},
					success: function(data) {
						btn.attr('data-content', data);
					}
				});
			}
			
			$(this).popover();
		});

 

Here is my PHP that generates the HTML for the buttons:

//build change order status buttons
function build_change_order_status_btns($id, $user_dept_code, $job_number, $enterprise, $status) {
	
	// define output button array
	$btn = [];

	// produce the buttons
	foreach ( $status as $dept => $stat ) {
		
		//check if status ID is an array holding additonal information
		$status_id = is_array($stat) ? $stat['status_id'] : $stat;
		
		//retrieve expected complete time
		if ( isset( $stat[ 'expected_complete_time' ] ) ) {
			$today = new DateTime( "now" );
			$expected_complete_time = new DateTime( $stat[ 'expected_complete_time' ] );
			$eta = $today->diff( $expected_complete_time );

			$str_eta = $eta->format( '%r%d' );

			if ( $expected_complete_time->format( 'd/m/Y' ) === $today->format( 'd/m/Y' ) ) {
				$eta = 'Today';
			} else {
				$eta = ( $str_eta + 1 == 1 ) ? $str_eta + 1 . ' day': $str_eta + 1 . ' days';
			}

		} else {
			$eta = '';
		}
		
		// enabled if user dept is 1,2,3 or the current dept matches the user's dept
		$enabled = in_array( $user_dept_code, [ 1, 2, 3 ] ) || in_array( $dept, explode( ',', $user_dept_code ) ) ? '' : ' disabled';

		// populate the dynamic values. you should actually use a template here with replaceable tags, then only produce the button that matches the current status value
		$buttons[ 1 ] = "<button type='button' class='btn btn-warning btn-sm btn_change_order_status_dialog rounded-0' data-order-id='$id' data-order-number='$job_number' data-order-enterprise='$enterprise' data-dept-code='$dept' data-toggle='popover' data-trigger='hover' data-html='true' title='Order Status Summary' data-content=''$enabled>ETA: $eta</button>";
		
		$buttons[ 2 ] = "<button type='button' class='btn btn-danger btn-sm btn_change_order_status_dialog rounded-0' data-order-id='$id' data-order-number='$job_number' data-order-enterprise='$enterprise' data-dept-code='$dept' data-toggle='popover' data-trigger='hover' data-html='true' title='Order Status Summary' data-content=''$enabled>Delayed</button>";
		
		$buttons[ 3 ] = "<button type='button' class='btn-primary btn-sm btn_change_order_status_dialog rounded-0' data-order-id='$id' data-order-number='$job_number' data-order-enterprise='$enterprise' data-dept-code='$dept' data-toggle='popover' data-trigger='hover' data-html='true' title='Order Status Summary' data-content=''$enabled>Finished</button>";
		
		$buttons[ 0 ] = "<button type='button' class='btn btn-secondary btn-sm btn_change_order_status_dialog rounded-0' data-order-id='$id' data-order-number='$job_number' data-order-enterprise='$enterprise' data-dept-code='$dept'$enabled>Not Started</button>";

		// get the button that matches the current status value for each dept
		$btn[ $dept ] = $buttons[ $status_id ];

	}
	
	// examine the results
	return $btn;
}

 

Also, I've attached a video demonstrating the problem...

 

Edited by mongoose00318
made title more specific
Link to comment
Share on other sites

AJAX is asynchronous. Just because you put it in your Javascript before the .popover() does not mean it will have finished by that point.

It isn't so much that it works on the second time but that by the time you mouseover again the AJAX from the first time has finished. Try it: mouseover, then out, then over, on the same element quickly. And every time you mouseover before the AJAX has completed, another one will start up.
You might also be able to keep your mouse over the element and it'll eventually show. Depends on the popup code. Likely not.

Render the popup HTML ahead of time instead of starting with an empty string and filling it through AJAX.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.