From 0767804aa00dfa5c6e5815bb238e810820b8efc0 Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <hi@dimitr.ie>
Date: Tue, 24 Mar 2026 18:52:40 +0100
Subject: [PATCH] Add tooltips to tier badges

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.
---
 .eleventy.js                             |  4 ++--
 src/_includes/components/tier-badges.njk |  4 ++--
 src/css/style.css                        | 12 ++++++++++++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 50dd79832f..e4314b5837 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -738,13 +738,13 @@ module.exports = function(eleventyConfig) {
         if (!showCloud && !showSelfHosted) return '';
         let html = `<div class="ff-tier-badges">`;
         if (showCloud) {
-            html += `<div class="ff-tier-badge ff-tier--available">`;
+            html += `<div class="ff-tier-badge ff-tier--available ff-tooltip" data-tooltip="Available on FlowFuse Cloud: ${cloudLabel}">`;
             html += `<span class="ff-tier-badge__label">Cloud</span>`;
             html += `<span class="ff-tier-badge__value">${cloudLabel}</span>`;
             html += `</div>`;
         }
         if (showSelfHosted) {
-            html += `<div class="ff-tier-badge ff-tier--available">`;
+            html += `<div class="ff-tier-badge ff-tier--available ff-tooltip" data-tooltip="Available on FlowFuse Self-Hosted: ${selfHostedLabel}">`;
             html += `<span class="ff-tier-badge__label">Self-Hosted</span>`;
             html += `<span class="ff-tier-badge__value">${selfHostedLabel}</span>`;
             html += `</div>`;
diff --git a/src/_includes/components/tier-badges.njk b/src/_includes/components/tier-badges.njk
index c8ca413437..65b36b175a 100644
--- a/src/_includes/components/tier-badges.njk
+++ b/src/_includes/components/tier-badges.njk
@@ -3,13 +3,13 @@
 {% if showTierCloud or showTierSelfHosted %}
 <div class="ff-tier-badges">
   {% if showTierCloud %}
-    <div class="ff-tier-badge ff-tier--available">
+    <div class="ff-tier-badge ff-tier--available ff-tooltip" data-tooltip="Available on FlowFuse Cloud: {{ tierCloud }}">
       <span class="ff-tier-badge__label">Cloud</span>
       <span class="ff-tier-badge__value">{{ tierCloud }}</span>
     </div>
   {% endif %}
   {% if showTierSelfHosted %}
-    <div class="ff-tier-badge ff-tier--available">
+    <div class="ff-tier-badge ff-tier--available ff-tooltip" data-tooltip="Available on FlowFuse Self-Hosted: {{ tierSelfHosted }}">
       <span class="ff-tier-badge__label">Self-Hosted</span>
       <span class="ff-tier-badge__value">{{ tierSelfHosted }}</span>
     </div>
diff --git a/src/css/style.css b/src/css/style.css
index 644ff10d69..0470acb493 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1674,6 +1674,18 @@ h4:hover .header-anchor::before {
     line-height: 1rem;
 }
 
+.ff-tier-badge.ff-tooltip:hover:after,
+.ff-tier-badge.ff-tooltip:hover:before {
+    transition-delay: 0.5s;
+}
+
+.ff-tier-badge.ff-tooltip:hover:after {
+    font-size: 0.75rem;
+    min-width: auto;
+    white-space: nowrap;
+    padding: 4px 8px;
+}
+
 .ff-tier-badge__label {
     @apply px-2.5 py-0.5 text-gray-500 font-medium bg-gray-100 border border-r-0 border-gray-200 rounded-l;
 }