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.

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>

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;
 }