Mouse-over popup on events list

[Jeroen Verkarre]

Hello, my customer would like a simple mouse-over popup like on the calendar view for the list-view. Is this possible, or could this be implemented? Thanks you for your response!
All the best, Jeroen

[Jeroen Verkarre]

[Stephen Harris]

Hi Jeroen,

Yes this would be possible, but the details of how are probably a bit to much for me to provide here so I’ll provide outlline:

1. Create a javascript file which initialises the tooltip (The front-end calendar uses q-tip2). You don’t have to load the q-tip2 library or anything, just the code to initialises it. The examples on the qtip2 (e.g.: http://jsfiddle.net/craga89/G2sqU/) usually involve HTML mark-up – this is step 4)

2. Register it, specifying the q-tip library (included in EO) as a dependency (the following assumes the above javascript file is in your theme folder and named ‘jeroen-tooltip.js’.

add_action( 'init', 'jeroen_register_scripts', 15 );
function jeroen_register_scripts(){
    wp_register_script( 
        'jeroen-tooltip', 
        get_stylesheet_directory_uri() . '/jeroen-tooltip.js',
       array( 'jquery', 'eo_qtip2' ),
       '1.0'
     );
 }

3./ Load script and styles

add_action( 'init', 'jeroen_enqueue_scripts', 15 );
function jeroen_enqueue_scripts(){
    wp_enqueue_script( 'jeroen-tooltip' );
    wp_enqueue_style( 'eo_front' );
 }

4./ Edit the template to include the mark-up of the tooltip (as mentioned in step 1).

Steps 2&3, can go in functions.php. But all of the above would work in a separate plug-in with a bit of editing. 4 involves copying the (shortcode event list) template into your theme and editing it there.

[Author]

Posts