Relative Positioner (float)

✅

Plugin page: https://zeroqode.com/plugin/relative-positioner-float-plugin-for-bubble-1712923108290x156697493450546060

Demo to preview the plugin:

✅

Live demo: https://sdfsfsdfsdf.bubbleapps.io/relative_positioner?utm_source=docs&utm_medium=referral&utm_campaign=demo_link

✅

Bubble Editor: https://bubble.io/page?version=live&id=sdfsfsdfsdf&name=relative_positioner&tab=Design&type=page

Introduction

The Relative Positioner (Float) plugin helps you create flexible and precisely positioned floating UI elements in your Bubble app. It is ideal for building menus, pop-ups, tooltips, and other components that need to appear relative to another element. With smart positioning and automatic adjustments, the plugin ensures your UI remains clean, responsive, and usable across different screen sizes.

Key Features

Prerequisites

Before using the plugin:

A Bubble app with UI elements (e.g. buttons, groups, tooltips)

Basic understanding of element positioning and layouts in Bubble

Name	Description	Type
Watched element loses focus (user clicks elsewhere)	Triggered when the user clicks outside the watched element, causing it to lose focus	Event

Name	Description	Type
Element to be picked	The ID of the element that will float (e.g. tooltip, dropdown, or menu)	Text
Anchor element	The ID of the element that acts as the reference point (the element the floating element will attach to)	Text
Placement	Defines where the floating element appears relative to the anchor (e.g. top, bottom, left, right, including variations like start/end or auto positioning)	Text
Strategy	Determines how positioning is calculated. Use “absolute” by default, or “fixed” if the anchor element is also fixed on the page	Text
Offset	A general offset value used to adjust the position of the floating element relative to the anchor	Text
Offset explanation	Explains that offset shifts the element in the direction of its placement, and can be positive or negative	Text
Top/Bottom placement guide	For top or bottom placement: Skidding moves the element left/right, Displacement moves it up/down	Text
Left/Right placement guide	For left or right placement: Skidding moves the element up/down, Displacement moves it left/right	Text
Offset reference note	Refers to CSS offset behavior for more advanced positioning control	Text
Skidding	Optional horizontal adjustment of the floating element relative to the anchor	Number
Displacement	Optional vertical adjustment of the floating element relative to the anchor	Number

Name	Description	Type
Watched element	The ID of the element to monitor. When the user clicks outside of this element, it loses focus and triggers the blur event. Useful for hiding floating elements like dropdowns or tooltips	Text

Relative Positioner (float)

Demo to preview the plugin:

Introduction

Prerequisites

How to setup

Step 1 – Install the Plugin

Step 2 – Add the Plugin Element to Your Page

Step 3 – Enable ID Attributes in Bubble Settings

Plugin Element - Relative Positioner

Element Events

Element Actions

Pick and position element

Add blur detector

Workflow example

Position Element on Button Click

Changelogs

Update 08.07.25 - Version 1.12.0

Update 19.06.25 - Version 1.11.0

Update 02.12.24 - Version 1.10.0

Update 15.09.24 - Version 1.9.0

Update 24.07.24 - Version 1.8.0

Update 19.06.24 - Version 1.7.0

Update 03.05.24 - Version 1.6.0

Update 12.04.24 - Version 1.5.0

Update 29.04.20 - Version 1.4.0

Update 07.04.20 - Version 1.3.0

Update 07.04.20 - Version 1.2.0

Update 06.04.20 - Version 1.1.0

Update 31.03.20 - Version 1.0.0