# Add CSS2DObject always above the other object

**URL:** <https://discourse.threejs.org/t/add-css2dobject-always-above-the-other-object/51887>\
**Category:** Questions\
**Tags:** css2dobject\
**Created:** [May 22, 2023, 7:05pm UTC](https://discourse.threejs.org/t/add-css2dobject-always-above-the-other-object/51887 "2023-05-22T19:05:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Carl1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/carl1/32/34771_2.png) [@Carl1](https://discourse.threejs.org/u/Carl1)\
**Post date:** [May 22, 2023, 7:05pm UTC](https://discourse.threejs.org/t/add-css2dobject-always-above-the-other-object/51887/1 "2023-05-22T19:05:02Z")

</div>

Hello everyone, I’m trying to add a popup with some text above the graph node on node click.  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/0/d0ea3ea6bad4c1410f412c87b9b11d489de9a275.png)  
node variable there is basically entity with x,y,z coordinates. But these coordinates are static and do not changing depending on graph rotation or zoom

```javascript
    const showTooltip = (node) => {
        const el = document.createElement('div')
        el.className = 'graph-tooltip'
        el.innerHTML = `<div class="graph-tooltip__content">${node.textDescription || ''}</div>`
        const objectCSS = new CSS2DObject(el)
        objectCSS.position.set(node.x, node.y + 20, node.z)
        objectCSS.name = 'tooltip';
        Graph.scene().add(objectCSS);
    }

```

the problem is when I’m rotating or zooming graph popup position is broken  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/f/5f79981644ea5a6536cc995c029f2b4a94766dff.png)  
(rotating)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/0/b0f48e22649a61160ef09b08076002029222af59.png)  
(zooming)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 22, 2023, 7:33pm UTC](https://discourse.threejs.org/t/add-css2dobject-always-above-the-other-object/51887/2 "2023-05-22T19:33:00Z")

</div>

Hi!  
Maybe this topic will be helpful: [Globe with markers and label: thoughts, ideas, approaches, solutions](https://discourse.threejs.org/t/globe-with-markers-and-label-thoughts-ideas-approaches-solutions/34995)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [May 23, 2023, 10:28am UTC](https://discourse.threejs.org/t/add-css2dobject-always-above-the-other-object/51887/3 "2023-05-23T10:28:29Z")

</div>

imo css2d/3d is questionable. it is awkward to use, it can’t hide behind geometry and the html will never be part of your scene, to position it especially for models is hard.

but stuff like this is so easy in the react eco system for threejs, especially since you parent it directly to your meshes and it will just follow along. could this be a way forward?

```jsx
const [clicked, click] = useState(false)
...
<mesh onClick={() => click(!clicked)} onPointerMissed={() => click(false)}>
  ...
  {clicked && <Html>....

```

> **[HTML Markers - CodeSandbox](https://codesandbox.io/s/html-markers-6oei7)**
>
> Occluding HTML annotations/markers.

> **[The three graces - CodeSandbox](https://codesandbox.io/s/the-three-graces-0n9it)**
>
> Experimentaing with lights and shadows.

> **[Mixing HTML and WebGL w/ occlusion - CodeSandbox](https://codesandbox.io/s/mixing-html-and-webgl-w-occlusion-9keg6)**
>
> Having HTML and WebGL in the same scene with the addition of occlusion.

> **[Bouncy watch - CodeSandbox](https://codesandbox.io/s/bouncy-watch-qyz5r)**
>
> Custom springy controls using use-gesture and react-spring.

> **[Sky dome with annotations - CodeSandbox](https://codesandbox.io/s/wbrfs)**
>
> Dome projecting texture and HTML annotations.

---

<div class="post-metadata">

**Author:** ![Carl1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/carl1/32/34771_2.png) [@Carl1](https://discourse.threejs.org/u/Carl1)\
**Post date:** [May 26, 2023, 1:56pm UTC](https://discourse.threejs.org/t/add-css2dobject-always-above-the-other-object/51887/4 "2023-05-26T13:56:31Z")

</div>

thx for your responses and sandbox examples. I’ve played a little bit with positions and camera zoom and made kinda a working solution. Code sandboxes were helpful to understand how things are supposed to work in general