There is a forum post on this already, but it is not in a Tip format and I still regularly get questions on how to do it. Originally post linked at bottom. Thank you @jmalmeida for the instructions on how to do this.
Step 1. Put elements on the page. Need Groupfocus and a reference Element, plus a Javascript to Bubble element as well as an HTML element.
Step 2. Add IDs to the groupfocus and reference element
Step 3: Add suffix to Bubble to Javascript Element…Note can have two on the same page, one for left and one for top. Make sure Publish Value is checked and the Value type set to Number
Step 4: Add the run javascript action to your workflows. You can do this however you need it…but the reference element must already be loaded on the page since the values needed is the location (from left of screen and top of screen) the reference element is located. This obviously can change as the user may interact with the page, so it might be best to run this javascript action before showing the groupfocus element in the same action series. In my example I used a button.
var element = document.getElementById('reference'); var reference = element.getBoundingClientRect(); bubble_fn_left(reference.left);
var element = document.getElementById('reference'); var reference = element.getBoundingClientRect(); bubble_fn_top(reference.top);
Step 5: setup HTML
In the screen shot above the use of formatted as text for the top value is used as a simple demonstration of how we can change the offset dynamically based on other values…in this example that is the selected custom state value, but in other cases it may be the position of the reference element from top of screen versus the total screen height (I’m not going into details on how to set that up).
Again, the screen shots are for simple demonstration of how to setup dynamically the top value based on other parameters, but the point is you can change it by doing the simple math of the JS Top’s value minus or plus some value you want to use…if you want the groupfocus to sit directly above the reference element…you need to subtract the height of the groupfocus, but can not reference the element height value exposed by Bubble since that is 0 until it is visible on screen, so use a fixed height groupfocus and hard code the value.
Red element below screenshots is my groupfocus element, with 3 different offset top values based on inline conditionals of the HTML.
One thing to know is that the offset left and top values are based on position from the left of screen and top of screen and not the distance from the reference element, since the position of the groupfocus is basically a fixed position according to the page left and top.