Add tooltip

apps/client/src/app/pages/pricing/pricing-page.component.ts

@@ -33,6 +33,9 @@ export class PricingPageComponent implements OnDestroy, OnInit {
   public isLoggedIn: boolean;
   public price: number;
   public priceId: string;
+  public professionalDataProviderTooltipPremium = translate(
+    'PROFESSIONAL_DATA_PROVIDER_TOOLTIP_PREMIUM'
+  );
   public routerLinkFeatures = ['/' + $localize`:snake-case:features`];
   public routerLinkRegister = ['/' + $localize`:snake-case:register`];
   public user: User;

apps/client/src/app/pages/pricing/pricing-page.html

@@ -228,6 +228,13 @@
                   <li class="align-items-center d-flex mb-1">
                     <ion-icon class="mr-1" name="checkmark-circle-outline" />
                     <span i18n>Professional Data Provider</span>
+                    <span
+                      class="align-items-center d-flex ml-1"
+                      matTooltipPosition="above"
+                      [matTooltip]="professionalDataProviderTooltipPremium"
+                    >
+                      <ion-icon name="information-circle-outline" />
+                    </span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
                     <ion-icon class="mr-1" name="checkmark-circle-outline" />

libs/ui/src/lib/i18n.ts

@@ -21,6 +21,7 @@ const locales = {
   MONTH: $localize`Month`,
   MONTHS: $localize`Months`,
   OTHER: $localize`Other`,
+  PROFESSIONAL_DATA_PROVIDER_TOOLTIP_PREMIUM: $localize`Get access to 100’000+ tickers from over 50 exchanges`,
   PRESET_ID: $localize`Preset`,
   RETIREMENT_PROVISION: $localize`Retirement Provision`,
   SATELLITE: $localize`Satellite`,