I was trying to add CSS2DObject above other object and on desktop it’s working kinda well, but problem comes when scene is opened on mobile phones. Basically, on other element click I’m receiving its coordinates and placing CSS2DObject element.y+ 20 (to show it above). But when it comes to mobile such logic is broken. How to correctly do this?
<div id="graph-tooltip" className="graph-tooltip hidden">
<div id="graph-tooltip__content" className="graph-tooltip__content">
</div>
</div>
showTooltip is triggered on other element click
const showTooltip = (graph, node) => {
const html = document.getElementById("graph-tooltip");
const content = document.getElementById("graph-tooltip__content");
content.innerText = `Some text`;
let label = new CSS2DObject(html);
label.userData = {
cNormal: new Vector3(),
cPosition: new Vector3(),
mat4: new Matrix4(),
}
label.position.copy({
...node, y: node.y + 25
})
label.element.classList.remove("hidden");
Graph.scene().add(label);
}
desktop
mobile
on 2nd screen (mobile) popups is showing under clicked element for some reason and hiding it by itself
I understand that it’s because of scene width, but how to code such logic correclty? (graphs are a little bit different, but but the problem still the same with any amount of nodes)