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". Applies to badges rendered via both the Eleventy transform
and the Nunjucks template.

Author: dimitrieh

.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>`;

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>