Add cloud storage tooltip with link to supported services

Author: tobihagemann

i18n/de.yaml

@@ -895,6 +895,8 @@
   translation: "Unbegrenzte Tresore"
 - id: pricing_individual_benefit_2
   translation: "Kompatibel mit jedem Cloud-Speicher"
+- id: pricing_individual_benefit_2_tooltip
+  translation: "Unterstützte Dienste variieren je nach Plattform. <a href='https://docs.cryptomator.org/misc/supported-cloud-services/' target='_blank' rel='noopener' class='text-link'>Mehr erfahren</a>"
 - id: pricing_individual_benefit_3
   translation: "Voller Zugriff über Desktop-App"
 - id: pricing_individual_benefit_4

i18n/en.yaml

@@ -933,7 +933,9 @@
 - id: pricing_individual_benefit_1
   translation: "Unlimited vaults"
 - id: pricing_individual_benefit_2
-  translation: "Works with any cloud"
+  translation: "Works with any cloud storage"
+- id: pricing_individual_benefit_2_tooltip
+  translation: "Supported services vary by platform. <a href='https://docs.cryptomator.org/misc/supported-cloud-services/' target='_blank' rel='noopener' class='text-link'>Learn more</a>"
 - id: pricing_individual_benefit_3
   translation: "Full access via Desktop app"
 - id: pricing_individual_benefit_4

layouts/pricing/single.html

@@ -89,6 +89,10 @@ <h3>
               <li>
                 <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
                 <span>{{ i18n "pricing_individual_benefit_2" . }}</span>
+                <div class="has-tooltip">
+                  <i class="fa-solid fa-info-circle text-gray-600"></i>
+                  <div class="tooltip tooltip-center rounded-sm shadow-md bg-white text-xs w-40 p-2">{{ i18n "pricing_individual_benefit_2_tooltip" . | safeHTML }}</div>
+                </div>
               </li>
               <li>
                 <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>