Bootstrap Popover On Hover Issue

[mongoose00318]

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 August 21, 2020 by mongoose00318
made title more specific

[requinix]

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.