Showing popups below the breadcrumbs

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 !

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.

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:

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:

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..