feat: add tooltips to all api links

Author: schultek

site/lib/_sass/_site.scss

@@ -35,6 +35,7 @@
 @use 'components/tabs';
 @use 'components/theming';
 @use 'components/toc';
+@use 'components/tooltip';
 @use 'components/trailing';
 
 // Styles for specific pages, alphabetically ordered.

site/lib/_sass/components/_tooltip.scss

@@ -0,0 +1,57 @@
+.tooltip-wrapper {
+    position: relative;
+
+    a.tooltip-target {
+        text-decoration: underline dotted;
+    }
+
+    .tooltip {
+        visibility: hidden;
+
+        display: flex;
+        position: absolute;
+        z-index: 100;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+
+        flex-flow: column nowrap;
+        width: 20rem;
+
+        background: var(--site-raised-bgColor);
+        border: 0.05rem solid rgba(0, 0, 0, .125);
+        border-radius: 0.75rem;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
+        padding: 0.8rem;
+
+        .tooltip-header {
+            font-size: 1.2rem;
+            font-weight: 500;
+            margin-bottom: 0.25rem;
+        }
+
+        .tooltip-content {
+            font-size: 0.875rem;
+            color: var(--site-secondary-textColor);
+        }
+    }
+
+    // On non-touch devices, show tooltip on hover or focus.
+    @media all and not (pointer: coarse) {
+        &:hover .tooltip {
+            visibility: visible;
+        }
+
+        &:has(.tooltip-target:focus) .tooltip {
+            visibility: visible;
+        }
+    }
+
+    // On touch devices, show tooltip on click.
+    @media all and (pointer: coarse) {
+        .tooltip.visible {
+            visibility: visible;
+        }
+    }
+
+}

site/lib/jaspr_options.dart

@@ -7,32 +7,34 @@
 import 'package:jaspr/jaspr.dart';
 import 'package:docs_flutter_dev_site/src/client/global_scripts.dart'
     as prefix0;
-import 'package:docs_flutter_dev_site/src/components/common/client/cookie_notice.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/api_link_tooltip.dart'
     as prefix1;
-import 'package:docs_flutter_dev_site/src/components/common/client/copy_button.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/cookie_notice.dart'
     as prefix2;
-import 'package:docs_flutter_dev_site/src/components/common/client/download_latest_button.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/copy_button.dart'
     as prefix3;
-import 'package:docs_flutter_dev_site/src/components/common/client/feedback.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/download_latest_button.dart'
     as prefix4;
-import 'package:docs_flutter_dev_site/src/components/common/client/on_this_page_button.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/feedback.dart'
     as prefix5;
-import 'package:docs_flutter_dev_site/src/components/common/client/os_selector.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/on_this_page_button.dart'
     as prefix6;
-import 'package:docs_flutter_dev_site/src/components/dartpad/dartpad_injector.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/os_selector.dart'
     as prefix7;
-import 'package:docs_flutter_dev_site/src/components/layout/menu_toggle.dart'
+import 'package:docs_flutter_dev_site/src/components/dartpad/dartpad_injector.dart'
     as prefix8;
-import 'package:docs_flutter_dev_site/src/components/layout/site_switcher.dart'
+import 'package:docs_flutter_dev_site/src/components/layout/menu_toggle.dart'
     as prefix9;
-import 'package:docs_flutter_dev_site/src/components/layout/theme_switcher.dart'
+import 'package:docs_flutter_dev_site/src/components/layout/site_switcher.dart'
     as prefix10;
-import 'package:docs_flutter_dev_site/src/components/pages/archive_table.dart'
+import 'package:docs_flutter_dev_site/src/components/layout/theme_switcher.dart'
     as prefix11;
-import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters.dart'
+import 'package:docs_flutter_dev_site/src/components/pages/archive_table.dart'
     as prefix12;
-import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters_sidebar.dart'
+import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters.dart'
     as prefix13;
+import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters_sidebar.dart'
+    as prefix14;
 
 /// Default [JasprOptions] for use with your jaspr project.
 ///
@@ -56,87 +58,96 @@ JasprOptions get defaultJasprOptions => JasprOptions(
       'src/client/global_scripts',
     ),
 
-    prefix1.CookieNotice: ClientTarget<prefix1.CookieNotice>(
+    prefix1.ApiLinkTooltip: ClientTarget<prefix1.ApiLinkTooltip>(
+      'src/components/common/client/api_link_tooltip',
+      params: _prefix1ApiLinkTooltip,
+    ),
+
+    prefix2.CookieNotice: ClientTarget<prefix2.CookieNotice>(
       'src/components/common/client/cookie_notice',
     ),
 
-    prefix2.CopyButton: ClientTarget<prefix2.CopyButton>(
+    prefix3.CopyButton: ClientTarget<prefix3.CopyButton>(
       'src/components/common/client/copy_button',
-      params: _prefix2CopyButton,
+      params: _prefix3CopyButton,
     ),
 
-    prefix3.DownloadLatestButton: ClientTarget<prefix3.DownloadLatestButton>(
+    prefix4.DownloadLatestButton: ClientTarget<prefix4.DownloadLatestButton>(
       'src/components/common/client/download_latest_button',
-      params: _prefix3DownloadLatestButton,
+      params: _prefix4DownloadLatestButton,
     ),
 
-    prefix4.FeedbackComponent: ClientTarget<prefix4.FeedbackComponent>(
+    prefix5.FeedbackComponent: ClientTarget<prefix5.FeedbackComponent>(
       'src/components/common/client/feedback',
-      params: _prefix4FeedbackComponent,
+      params: _prefix5FeedbackComponent,
     ),
 
-    prefix5.OnThisPageButton: ClientTarget<prefix5.OnThisPageButton>(
+    prefix6.OnThisPageButton: ClientTarget<prefix6.OnThisPageButton>(
       'src/components/common/client/on_this_page_button',
     ),
 
-    prefix6.OsSelector: ClientTarget<prefix6.OsSelector>(
+    prefix7.OsSelector: ClientTarget<prefix7.OsSelector>(
       'src/components/common/client/os_selector',
     ),
 
-    prefix7.DartPadInjector: ClientTarget<prefix7.DartPadInjector>(
+    prefix8.DartPadInjector: ClientTarget<prefix8.DartPadInjector>(
       'src/components/dartpad/dartpad_injector',
-      params: _prefix7DartPadInjector,
+      params: _prefix8DartPadInjector,
     ),
 
-    prefix8.MenuToggle: ClientTarget<prefix8.MenuToggle>(
+    prefix9.MenuToggle: ClientTarget<prefix9.MenuToggle>(
       'src/components/layout/menu_toggle',
     ),
 
-    prefix9.SiteSwitcher: ClientTarget<prefix9.SiteSwitcher>(
+    prefix10.SiteSwitcher: ClientTarget<prefix10.SiteSwitcher>(
       'src/components/layout/site_switcher',
     ),
 
-    prefix10.ThemeSwitcher: ClientTarget<prefix10.ThemeSwitcher>(
+    prefix11.ThemeSwitcher: ClientTarget<prefix11.ThemeSwitcher>(
       'src/components/layout/theme_switcher',
     ),
 
-    prefix11.ArchiveTable: ClientTarget<prefix11.ArchiveTable>(
+    prefix12.ArchiveTable: ClientTarget<prefix12.ArchiveTable>(
       'src/components/pages/archive_table',
-      params: _prefix11ArchiveTable,
+      params: _prefix12ArchiveTable,
     ),
 
-    prefix12.LearningResourceFilters:
-        ClientTarget<prefix12.LearningResourceFilters>(
+    prefix13.LearningResourceFilters:
+        ClientTarget<prefix13.LearningResourceFilters>(
           'src/components/pages/learning_resource_filters',
         ),
 
-    prefix13.LearningResourceFiltersSidebar:
-        ClientTarget<prefix13.LearningResourceFiltersSidebar>(
+    prefix14.LearningResourceFiltersSidebar:
+        ClientTarget<prefix14.LearningResourceFiltersSidebar>(
           'src/components/pages/learning_resource_filters_sidebar',
         ),
   },
   styles: () => [],
 );
 
-Map<String, dynamic> _prefix2CopyButton(prefix2.CopyButton c) => {
+Map<String, dynamic> _prefix1ApiLinkTooltip(prefix1.ApiLinkTooltip c) => {
+  'url': c.url,
+  'text': c.text,
+};
+Map<String, dynamic> _prefix3CopyButton(prefix3.CopyButton c) => {
   'toCopy': c.toCopy,
   'buttonText': c.buttonText,
   'classes': c.classes,
   'title': c.title,
 };
-Map<String, dynamic> _prefix3DownloadLatestButton(
-  prefix3.DownloadLatestButton c,
+Map<String, dynamic> _prefix4DownloadLatestButton(
+  prefix4.DownloadLatestButton c,
 ) => {'os': c.os, 'arch': c.arch};
-Map<String, dynamic> _prefix4FeedbackComponent(prefix4.FeedbackComponent c) => {
+Map<String, dynamic> _prefix5FeedbackComponent(prefix5.FeedbackComponent c) => {
   'issueUrl': c.issueUrl,
 };
-Map<String, dynamic> _prefix7DartPadInjector(prefix7.DartPadInjector c) => {
+Map<String, dynamic> _prefix8DartPadInjector(prefix8.DartPadInjector c) => {
   'title': c.title,
   'theme': c.theme,
   'height': c.height,
   'runAutomatically': c.runAutomatically,
 };
-Map<String, dynamic> _prefix11ArchiveTable(prefix11.ArchiveTable c) => {
+Map<String, dynamic> _prefix12ArchiveTable(prefix12.ArchiveTable c) => {
   'os': c.os,
   'channel': c.channel,
 };