Retrieving ID of mouseover element

[dylantucker]

Hi all -

I’m trying to create an interactive siteplan that allows users to hover over (or tap) houses in an aerial map and for the tooltips to show info about that house.

The map is an SVG file (each house is it’s own group ) and the site itself is built using Kirby (the php flat file cms). I’m using the javascript plugin ‘tooltipster’ to show the tooltips.

It’s hard to show a codepen as it’s built in kirby, but:

Kirby calls my house (or plot) name from a set of structured data and filters various fields according to name, like so:

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

Tooltipster is then setup to show a div with the id “tooltip_content” when hovering over any element with the following attribute: data-tooltip-content=“#tooltip_content”

I want to know if there’s a way of getting the id of the current group ID if it has the data-tooltip-content attribute that the mouse is over, and using it to filter the plots to return the correct house.

So, in theory I could have something an svg group element being:

and the tooltip being:

<div id="tooltip_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>

Please forgive the poor code etc but I am a frontend designer still learning code. But in the above example, tool tipster knows to show a tooltip as you’ve interacted with an element that has the correct data attribute, and then the php that is shown in the div filters the dataset according to the svgid which I’ve designed to match up in terms of names. Hope that makes sense!

Many thanks!