Using transformed position in shader

I’m trying to achieve this effect using shader tips-effect . The tips is always on the right side. And the tips’s y is always related to the hotspot’s y.

Here is my idea of approching this:

  1. Setting the tips’ x to make sure the tips is on the right/left side.
  2. Using the hotspot’s transformed( projectionMatrix * viewModelMatrix * hotspotPosition ) y to set the tips’ y.
  3. Setting tips’z to 0.0 to make sure the tips always shown.

But I got this result:
The tips’ y seem not equals to coresponding hotspot’s y.
my_implementation

I thought there something wrong with the hotspot’s transformed position. But when I setting tips’ position to hotspot’s to test the hotspot’s transformed position, the result seems right to me:
test

Is there something wrong with my idea?

It seems that the tips’ y should be hotspot’s transformed y / hotspot’s transformed w:

hotspotTransformedPosition = projectionMatrix * modelViewMatrix * vec4( hotspotPosition, 1.0 );
tipsPosition.y = hotspotTransformedPosition.y / hotspotTransformedPosition.w;

the result:
solved