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.
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!