Id of mouseover element to filter structured data

Hi all - I’m experimenting for a possible project by trying to show data from a structured field in a div based on the parent element the mouse is over. I’m assuming it will require javascript of some kind but thought someone out there might be able to help me. I’m thinking it could look something like this below, but it’s as far as I’ve got!

<div id="dynamic_content">
<?php
        $plots = $page->plots()->structure();
        // get the one you need, e.g. by name
        $plot1 = $plots->findBy('name', 'ID_OF_MOUSEOVER_ELEMENT');
        echo $plotID_OF_MOUSEOVER_ELEMENT->name()->html();
        echo $plotID_OF_MOUSEOVER_ELEMENT->price()->html();
?>
</div>

Two options:

  • Render the mouseover content in the page, hide visually, show on mouseover
  • Do not render the content in the page and get it via an Ajax call, use data attributes to fetch the correct entry

Thanks - never thought of hiding with css!