Add information tooltip to export button

mathesar-foundation · Dec 18, 2024 · 59ae25c · 59ae25c
1 parent d92eb24
commit 59ae25c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/mathesar_ui/src/i18n/languages/en/dict.json b/mathesar_ui/src/i18n/languages/en/dict.json
@@ -247,6 +247,7 @@
   "explore_your_data": "Explore your Data",
   "exploring_from": "Exploring from",
   "export": "Export",
+  "export_csv_help": "Export the {tableName} table as a CSV file. Your current filters and sorting will be applied to the exported data.",
   "extract_columns_to_new_table": "{count, plural, one {Extract Column Into a New Table} other {Extract Columns Into a New Table}}",
   "failed_load_preview": "Failed to load preview",
   "failed_to_fetch_column_information": "Failed to fetch column information.",

diff --git a/mathesar_ui/src/systems/table-view/actions-pane/ActionsPane.svelte b/mathesar_ui/src/systems/table-view/actions-pane/ActionsPane.svelte
@@ -7,7 +7,12 @@
   import { iconExport, iconInspector, iconTable } from '@mathesar/icons';
   import { tableInspectorVisible } from '@mathesar/stores/localStorage';
   import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
-  import { AnchorButton, Button, Icon } from '@mathesar-component-library';
+  import {
+    AnchorButton,
+    Button,
+    Icon,
+    Tooltip,
+  } from '@mathesar-component-library';
 
   import FilterDropdown from './record-operations/filter/FilterDropdown.svelte';
   import GroupDropdown from './record-operations/group/GroupDropdown.svelte';
@@ -62,17 +67,25 @@
       <!-- TODO: Display Share option when we re-implement it with the new permissions structure -->
       <!-- <ShareTableDropdown id={table.oid} /> -->
 
-      <AnchorButton
-        href="/api/export/v0/tables/?{exportLinkParams}"
-        data-tinro-ignore
-        appearance="secondary"
-        size="medium"
-        aria-label={$_('export')}
-        download="{table.name}.csv"
-      >
-        <Icon {...iconExport} />
-        <span class="responsive-button-label">{$_('export')}</span>
-      </AnchorButton>
+      <Tooltip allowHover>
+        <AnchorButton
+          slot="trigger"
+          href="/api/export/v0/tables/?{exportLinkParams}"
+          data-tinro-ignore
+          appearance="secondary"
+          size="medium"
+          aria-label={$_('export')}
+          download="{table.name}.csv"
+        >
+          <Icon {...iconExport} />
+          <span class="responsive-button-label">{$_('export')}</span>
+        </AnchorButton>
+        <span slot="content">
+          {$_('export_csv_help', {
+            values: { tableName: table.name },
+          })}
+        </span>
+      </Tooltip>
 
       <Button
         appearance="secondary"