# How to associate a popup with a vtkActor?

**URL:** https://discourse.vtk.org/t/how-to-associate-a-popup-with-a-vtkactor/3948
**Category:** Web
**Created:** [August 10, 2020, 11:33pm UTC](https://discourse.vtk.org/t/how-to-associate-a-popup-with-a-vtkactor/3948 "2020-08-10T23:33:33Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![meihuisu](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/9fc348/32.png) [@meihuisu](https://discourse.vtk.org/u/meihuisu)
#### Post date: [August 10, 2020, 11:33pm UTC](https://discourse.vtk.org/t/how-to-associate-a-popup-with-a-vtkactor/3948/1 "2020-08-10T23:33:33Z")

</div>

I have several vtkActor(s) on a vktFullScreenRenderWindow that visualize faults in  
3D space. I need to link a label popup with each actor but not sure how… thanks

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [August 11, 2020, 12:39am UTC](https://discourse.vtk.org/t/how-to-associate-a-popup-with-a-vtkactor/3948/2 "2020-08-11T00:39:14Z")

</div>

Check out the [SpheresAndLabels](https://kitware.github.io/vtk-js/examples/SpheresAndLabels.html) example for how to associate text with points in your scene.

---

<div class="post-metadata">

### Author: ![meihuisu](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/9fc348/32.png) [@meihuisu](https://discourse.vtk.org/u/meihuisu)
#### Post date: [August 11, 2020, 12:53am UTC](https://discourse.vtk.org/t/how-to-associate-a-popup-with-a-vtkactor/3948/3 "2020-08-11T00:53:45Z")

</div>

Thanks for quick respond.

Can I add onclick event on the sphere to display the matching labelWidget?  
A related question, how can I fix a labelWidget to window display position instead  
of world position?

---

<div class="post-metadata">

### Author: ![meihuisu](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/9fc348/32.png) [@meihuisu](https://discourse.vtk.org/u/meihuisu)
#### Post date: [August 11, 2020, 3:30pm UTC](https://discourse.vtk.org/t/how-to-associate-a-popup-with-a-vtkactor/3948/4 "2020-08-11T15:30:03Z")

</div>

Trying out with vtkLabelWidget

---

<div class="post-metadata">

### Author: ![flaviu2](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/f/74df32/32.png) [@flaviu2](https://discourse.vtk.org/u/flaviu2)
#### Post date: [August 11, 2020, 3:46pm UTC](https://discourse.vtk.org/t/how-to-associate-a-popup-with-a-vtkactor/3948/5 "2020-08-11T15:46:21Z")

</div>

vtkLabelWidget it’s not from standard VTK collections, right ?

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [August 11, 2020, 3:51pm UTC](https://discourse.vtk.org/t/how-to-associate-a-popup-with-a-vtkactor/3948/6 "2020-08-11T15:51:34Z")

</div>

If you want an onclick event, you can either do actor picking with vtkPicker, or you can use widgets. If you want to check out widgets, look for the PolyLineWidget example as a starting point.

---

<div class="post-metadata">

### Author: ![meihuisu](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/9fc348/32.png) [@meihuisu](https://discourse.vtk.org/u/meihuisu)
#### Post date: [August 14, 2020, 10:19pm UTC](https://discourse.vtk.org/t/how-to-associate-a-popup-with-a-vtkactor/3948/7 "2020-08-14T22:19:26Z")

</div>

It is from vtk-js/Sources/Interaction/Widgets/LabelWidget  
I was hoping to get it to stick to a corner like the OrientationMarkerWidget but  
failed

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [August 14, 2020, 10:28pm UTC](https://discourse.vtk.org/t/how-to-associate-a-popup-with-a-vtkactor/3948/8 "2020-08-14T22:28:27Z")

</div>

If you want a label that sticks to the corner, you can look at using SVG widgets. Check out `Sources/Widgets/SVG/SVGLandmarkRepresentation/index.js` for an example (the [PolyLineWidget](https://kitware.github.io/vtk-js/examples/PolyLineWidget.html) example uses this). You can construct arbitrary SVG scenes that can either be associated with 3D points, or independent. Since you want to have the labels be static with respect to the scene, you can use SVG to position your desired text using percentage positions.

---

<div class="post-metadata">

### Author: ![meihuisu](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/9fc348/32.png) [@meihuisu](https://discourse.vtk.org/u/meihuisu)
#### Post date: [August 15, 2020, 6:13am UTC](https://discourse.vtk.org/t/how-to-associate-a-popup-with-a-vtkactor/3948/9 "2020-08-15T06:13:15Z")

</div>

I think I have all the pieces I needed. I will try to integrate them. thanks

---

<div class="post-metadata">

### Author: ![meihuisu](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/9fc348/32.png) [@meihuisu](https://discourse.vtk.org/u/meihuisu)
#### Post date: [August 18, 2020, 10:03pm UTC](https://discourse.vtk.org/t/how-to-associate-a-popup-with-a-vtkactor/3948/10 "2020-08-18T22:03:12Z")

</div>

Got this to work. I used some code fragment from WidgetManager and SVGRepresentation and made a watermark like SVG layer. I would like to be  
able to snapshot these SVG layer along with the canvas image captured with renderWindow.captureImages(). Are there usage example ? thanks.
