Skip to content

Add tooltips to tier badges#4751

Open
dimitrieh wants to merge 2 commits intomainfrom
feature/tier-badge-tooltips
Open

Add tooltips to tier badges#4751
dimitrieh wants to merge 2 commits intomainfrom
feature/tier-badge-tooltips

Conversation

@dimitrieh
Copy link
Copy Markdown
Contributor

@dimitrieh dimitrieh commented Mar 24, 2026

Description

Adds native title tooltips to tier badges across the site (docs, changelog, blog posts). Hovering a badge shows e.g. "Available on FlowFuse Cloud — Enterprise" or "Available on FlowFuse Self-Hosted — All tiers".

Applies to both the JS-rendered badges (.eleventy.js renderTierBadges) and the Nunjucks template (tier-badges.njk).

CleanShot 2026-03-24 at 19 16 25@2x

Related Issue(s)

Follows up on #4741

Checklist

  • I have read the contribution guidelines
  • I have considered the performance impact of these changes
  • Suitable unit/system level tests have been added and they pass
  • Documentation has been updated
  • For blog PRs, an Art Request has been created (instructions)

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 24, 2026

👷 Deploy Preview for flowforge-website processing.

Name Link
🔨 Latest commit bfdd4d8
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/69c2d51a5e328d000886d47d

Use the existing ff-tooltip CSS system (data-tooltip attribute) to show
pricing tier availability on hover, e.g. "Available on FlowFuse Cloud:
Enterprise". Includes smaller font size, tighter padding, and a 0.5s
delay before showing. Applies to badges rendered via both the Eleventy
transform and the Nunjucks template.
@dimitrieh dimitrieh force-pushed the feature/tier-badge-tooltips branch from 50585e5 to 0767804 Compare March 24, 2026 18:16
@dimitrieh dimitrieh requested a review from Yndira-E March 24, 2026 18:16
@dimitrieh
Copy link
Copy Markdown
Contributor Author

@Yndira-E can you have a look?

@Yndira-E
Copy link
Copy Markdown
Contributor

I’m not sure the tooltip adds meaningful context here. The badge already states the same information pretty clearly (for example, “Cloud | Enterprise”), and the tooltip mostly repeats it in sentence form. What user problem were you aiming to solve with this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants