---
title: "Anchor content to an Element"
slug: "anchor-to-element"
updated: 2025-05-08T03:54:31Z
published: 2025-05-08T03:54:31Z
canonical: "support.whatfix.com/anchor-to-element"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Anchor content to an Element

## Overview

Anchor to Element enables you to attach content to a specific element on a webpage, ensuring it remains aligned with that element as the end user scrolls. When you anchor content to an element, the content's position is relative to the element it is attached to. As the user scrolls the page, the content moves along with the element, maintaining its alignment. For example, if you anchor a tooltip to a button, the tooltip remains attached to the button while scrolling.

Whatfix enables you to anchor a Smart Tip icon, Beacon, and Launcher to an element.

Consider that you have a Beacon attached to a link inside a scrollable sidebar within your application. Without anchoring, the Beacon might keep jumping or moving out of alignment as the user scrolls through the content. Anchoring the Beacon to an element within the sidebar ensures that the Beacon stays in its intended position, preventing misalignment as the user scrolls. This approach is particularly useful when Whatfix widgets don't scroll smoothly with the rest of the application, providing a more stable and consistent user experience.

Here’s how the Beacon looks when it’s not anchored to an element:

![Studio_Anchor to element_before](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Anchor%20to%20element_before.gif?sv=2026-02-06&spr=https&st=2026-10-17T05%3A53%3A56Z&se=2026-10-17T06%3A53%3A56Z&sr=c&sp=r&sig=4x7kis5JuIKrvHV61NsJsoBePCLS1ct42ZlWxEDPZHY%3D)

Here’s how the Beacon looks after being anchored to the element:

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_anchor_to_element_after.gif?sv=2026-02-06&spr=https&st=2026-10-17T05%3A53%3A56Z&se=2026-10-17T06%3A53%3A56Z&sr=c&sp=r&sig=4x7kis5JuIKrvHV61NsJsoBePCLS1ct42ZlWxEDPZHY%3D)

## When to use Anchor to Element?

- **Smooth widget movement**: If Whatfix widgets jump or do not move smoothly while scrolling, anchoring them to an element keeps them aligned and ensures smooth movement with the page.
- **Relevant guidance**: If content needs to stay aligned with a specific element, such as a sidebar or form field, anchoring ensures it remains relevant as the user scrolls.
- **Stable positioning for dynamic elements**: If elements change position or size, such as floating action buttons or pop-ups, anchoring keeps the content properly aligned as they move or resize on the page.
- **Scrollable containers**: If content is placed inside a scrollable container (a section that users can scroll through), anchoring the content to the element enables the content to move along with the scrollable section.

---

Use the following steps to anchor a Beacon to an element:

1. Create content using Whatfix Studio or edit the content using the Dashboard that you want to anchor.
2. On Studio, under **Configurations**, click **Additional options**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Additional_options.png?sv=2026-02-06&spr=https&st=2026-10-17T05%3A53%3A56Z&se=2026-10-17T06%3A53%3A56Z&sr=c&sp=r&sig=4x7kis5JuIKrvHV61NsJsoBePCLS1ct42ZlWxEDPZHY%3D)
3. Enable the **Anchor to Element** toggle. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_enable_anchor_to_element.png?sv=2026-02-06&spr=https&st=2026-10-17T05%3A53%3A56Z&se=2026-10-17T06%3A53%3A56Z&sr=c&sp=r&sig=4x7kis5JuIKrvHV61NsJsoBePCLS1ct42ZlWxEDPZHY%3D)

> [!WARNING]
> Note:
> 
> - Ensure that you select only one anchoring option based on your requirement. If both **Anchor to Element** and **Anchor to Page** are enabled for a content, the **Anchor to Page** toggle is automatically disabled, and the content behaves as if it were anchored only to the element.
> - Ensure that the element you're anchoring to is visible on the page. If the element is hidden or removed, the anchored content also disappears.
4. Continue creating or editing the content as needed.
5. Click **Save Tip**.

Relative refers to positioning or alignment that depends on the location or movement of another element. When content is positioned "relative" to an element, it changes its position or alignment based on that element's location on the page.

## Related

- [Anchor content to a Page](/anchor-to-page.md)