enqueue hover function

Question

I am trying to enqueue a hover function in my functios.php of my child theme, so that when hovering over a title, a div with a text will be visible. The code I am using is this:

<?php
add_action( 'wp_enqueue_scripts', 'home_game', 20);  

function home_game(){
?>
<script>
    let title1 = document.getElementById("home-title1");
    title1.addEventListener('mouseover', mouseOver);
    title1.addEventListener('mouseout', mouseOut);
    
    function mouseOver(){
    document.getElementById('title-box').style.display = 'none';
    document.getElementById('home-box1').style.display = 'block';
}
    function mouseOut(){
    document.getElementById('title-box').style.display = 'block'; 
    document.getElementById('home-box1').style.display = 'none';
}
    
</script>

<?php
}

It works in my fiddle so I guess the problem is in my php, I am fairly new with it... Any help or clue will be very appreciated!

fiddle link: https://jsfiddle.net/rvoLc3ph/

Answer 1

You can add your JS to a file in your child theme /js/example.js, then enqueue it like this:

//add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
function wpdocs_theme_name_scripts() {
    wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . '/js/example.js', [], '1.0.0', true );
}

Alternatively, you can add the styles inline using this:

add_action( 'wp_enqueue_scripts', 'wpse_home_game', 20 );
function wpse_home_game() {
    wp_register_script( 'home-game', false );
    wp_enqueue_script( 'home-game' );

    $script = "

    let title1 = document.getElementById('home-title1');

    // Check if title1 was present before wiring up event listeners.
    if ( null !== title1 )  {
        title1.addEventListener('mouseover', mouseOver);
        title1.addEventListener('mouseout', mouseOut);
    }

    function mouseOver(){
        document.getElementById('title-box').style.display = 'none';
        document.getElementById('home-box1').style.display = 'block';
    }

    function mouseOut(){
        document.getElementById('title-box').style.display = 'block';
        document.getElementById('home-box1').style.display = 'none';
    }

    ";

    wp_add_inline_script( 'home-game', $script );
}

See for source of this trick from @birgire wp_add_inline_script without dependency

Answer 2

While you can do this with JS, remember that it's sketchy on mobile phones and doesn't always work. You might consider instead using a CSS 'tooltips' type of approach, which is pretty much just straight CSS with a hidden DIV that shows on hover.

You can play around with the generators, one of which is here:

https://doodlenerd.com/css-element/tooltip-generator

If you post more about how you're creating the title and the text within the DIV I may be able to suggest easy ways of crafting them on the fly too.....