# Showing popups below the breadcrumbs

**URL:** <https://forum.inductiveautomation.com/t/showing-popups-below-the-breadcrumbs/116695>\
**Category:** Ignition\
**Tags:** ignition83, perspective\
**Created:** [August 7, 2026, 6:30am UTC](https://forum.inductiveautomation.com/t/showing-popups-below-the-breadcrumbs/116695 "2026-08-07T06:30:53Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nayanika.k](https://avatars.discourse-cdn.com/v4/letter/n/858c86/32.png) [@nayanika.k](https://forum.inductiveautomation.com/u/nayanika.k)\
**Post date:** [August 7, 2026, 6:30am UTC](https://forum.inductiveautomation.com/t/showing-popups-below-the-breadcrumbs/116695/1 "2026-08-07T06:30:53Z")

</div>

Hi, I implemented a breadcrumb (e.g. zone \> line 1 \> screen 1) and when i hover over zone or line 1 of the breadcrumb I'm able to open a pop up to show what are the next available screens to navigate to. Currently I'm able to open the pop up on the top left corner of the screen. Now I want this pop up to open below zone or line 1 or screen 1. Need ideas on how this can be implemented !

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [August 7, 2026, 12:59pm UTC](https://forum.inductiveautomation.com/t/showing-popups-below-the-breadcrumbs/116695/2 "2026-08-07T12:59:25Z")

</div>

If you're using a popup action, you can use the "Relative" position to open it below your mouse location, which is almost the same thing.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/3/23fbfb187a2e48efd46cc5c2b73bf529bd0fdf67.png)

Alternately, a thing I did some time back to show a mouseover popup at a position relative to the button.  
This was on a coordinate container, won't work with a flex or anything else most likely.

Create your popup as a component in the coordinate container.

On a `onMouseEnter` event:

```python
def runAction(self, event):
    tooltip = self.getSibling("Tooltip")
    params = {
        "tagPath":self.props.params.tagPath,
        "station":self.props.params.station
    }
    center_x = self.position.x + 0.5*self.position.width
    center_y = self.position.y
    Popup_Handler.show_tooltip(tooltip, center_x, center_y, params)

```

The `show_tooltip` is a custom function in the project library that just updates the properties on the component and sets `visible` to true.

An analogous script action lives on the `onMouseOut` event, which sets `display` to false:

```python
def show_tooltip(component, x_pos, y_pos, params):
    component.position.x = x_pos - 0.5*component.position.width
    component.position.y = y_pos - component.position.height
    
    for key in params.keys():
        component.props.params[key] = params[key]
            
    component.meta.visible = True
    
def hide_tooltip(component):
    component.meta.visible = False

```

It looks like a new popup is opening and closing but is actually the same component hiding and unhiding, with different properties to display the correct info.

You could also do the above with `system.perspective.togglePopup` and skip having to move and update an invisible component. I honestly forget why I didn't do that here, maybe because the `togglePopup` position argument is relative to the window and not the container so there's more things to calculate..