Flexible Content Preview Pop Up

admin.css

.acf-fc-popup .preview {
    position: absolute;
    right: 100%;
    margin-right: 0px;
    top: 0;
    background: #383c44;
    min-height: 100%;
    border-radius: 5px;
    align-content: center;
    display: grid;
}

.acf-fc-popup .preview .inner-preview {
    padding: 10px;
}

.acf-fc-popup .preview img {
    display: block;
}

admin.js

jQuery(function($) {

    $(document).on('hover', '.acf-fc-popup li a', function() {

        var $this = $(this)
        var parent = $this.parents('.acf-fc-popup');
        var filename = $this.attr('data-layout');


        if (parent.find('.preview').length > 0) {
            parent.find('.preview').html('<div class="inner-preview"><img src="' + theme_var.upload + filename + '.jpg"/></div>')
        } else {
            parent.append('<div class="preview"><div class="inner-preview"><img src="' + theme_var.upload + filename + '.jpg"/></div></div>')
        }


    })

})

functions.php

// REGISTER CSS & JS
add_action( 'admin_enqueue_scripts', 'acf_flexible_content_thumbnail' );
function acf_flexible_content_thumbnail() {
    
	// REGISTER ADMIN.CSS
	wp_enqueue_style( 'css-theme-admin', get_template_directory_uri() . '/css/admin.css', false, 1.0 );

	// REGISTER ADMIN.JS
	wp_register_script( 'js-theme-admin', get_template_directory_uri() . '/js/admin.js', array('jquery'), 1.0, true );	
	wp_localize_script( 'js-theme-admin', 'theme_var',
                array(
                    'upload' => get_template_directory_uri().'/img/acf-thumbnail/',
                )
	);
	wp_enqueue_script( 'js-theme-admin');
	
}