Help Content Tagging

Create contextual tooltips, onboarding hints, and inline help by tagging elements directly in your app.

What is Help Content Tagging?

Help content tagging lets you attach helpful information to specific UI elements in your app. Unlike guides (which are step-by-step tutorials), tagged content appears as:

Tooltips

Hover-triggered hints that explain what a button or field does

Onboarding Tips

First-time user hints that highlight new features

Contextual Messages

Inline help that appears based on user context

How to Tag Elements

Switch to Tag Mode

Open the extension and click "Tag Mode" or the tag icon in the toolbar.

Hover to Highlight

Move your mouse over the page. Elements will highlight as you hover, showing what will be selected.

Click to Tag

Click on the element you want to tag. The extension captures the element's CSS selector and metadata.

Complete in Admin

The extension sends you to SupportFlow admin where you can add the help content title, description, and configure display options.

What Gets Captured

When you tag an element, the extension captures:

CSS Selector	Unique identifier to find the element
Page URL	Which page the element is on
Element Type	Tag name (button, input, div, etc.)
Element Text	Visible text content
Position	Bounding box coordinates
Screenshot	Optional visual reference

Selector Generation

The extension generates reliable CSS selectors using this priority order:

id attribute (most reliable)
data-testid or data-cy attributes
Unique class combination
CSS path with :nth-of-type
XPath fallback (last resort)

Tip: For best reliability, add data-testid attributes to important UI elements in your app. These survive style changes and refactoring.

Displaying Help Content

Use the SupportFlow SDK to display tagged help content in your app:

Using the SDK Hooktsx

import { useSelectorTooltips } from '@supportflow/react'

function App() {
  // Automatically attaches tooltips to tagged elements
  useSelectorTooltips({
    appId: 'your-app-slug',
    pageUrl: window.location.pathname,
  })

  return <YourAppContent />
}

Configuration Options

Option	Description
trigger	hover, click, or focus
position	top, bottom, left, right
showOnce	Only show on first visit

Managing Tagged Content

View and manage all tagged help content from the SupportFlow admin:

Go to your app dashboard and click "Help Content"
Filter by type (tooltip, onboarding, contextual) or source (extension, manual)
Edit content, change trigger behavior, or delete items
View selector health indicators to see if selectors still match

Best Practices

Tag stable elements

Elements with IDs or data-testid attributes are more reliable than those identified by class names or position.

Keep content concise

Tooltips should be short (1-2 sentences). Link to full documentation for complex topics.

Don't over-tag

Too many tooltips can overwhelm users. Focus on non-obvious features and common pain points.

Test on production

Verify your tagged content appears correctly in your live environment. Selectors may differ between development and production.