fix: improve tooltip ux with delay and better placement (#775) (#776)

Co-authored-by: Fran McDade <18710366+frano-m@users.noreply.github.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: frano-m

src/components/Filter/components/FilterLabel/filterLabel.stories.tsx

@@ -5,6 +5,7 @@ import { FilterLabel } from "./filterLabel";
 
 const meta = {
   argTypes: {
+    annotation: { control: "object" },
     count: { control: "number" },
     disabled: { control: "boolean" },
     isOpen: { control: "boolean" },
@@ -27,6 +28,11 @@ type Story = StoryObj<typeof meta>;
 
 export const FilterLabelStory: Story = {
   args: {
+    annotation: {
+      description:
+        "This is a description of the filter label that provides additional context to the user.",
+      label: "Label",
+    },
     count: 123,
     disabled: false,
     isOpen: false,

src/components/Filter/components/FilterLabel/filterLabel.tsx

@@ -26,7 +26,12 @@ export const FilterLabel = ({
 }: FilterLabelProps): JSX.Element => {
   const filterLabel = count ? `${label}\xa0(${count})` : label; // When the count is present, a non-breaking space is used to prevent it from being on its own line
   return (
-    <Tooltip description={annotation?.description} title={annotation?.label}>
+    <Tooltip
+      description={annotation?.description}
+      enterDelay={300}
+      placement="right"
+      title={annotation?.label}
+    >
       <StyledButton
         color="inherit"
         disabled={disabled}

src/components/Filter/components/Filters/stories/constants.ts

@@ -105,6 +105,11 @@ const PROCESSED = {
  * Biological Sex select category view
  */
 export const BIOLOGICAL_SEX: SelectCategoryView = {
+  annotation: {
+    description:
+      "The biological sex of the donor organism, typically determined by chromosomal composition.",
+    label: "Biological Sex",
+  },
   key: "biologicalSex",
   label: "Biological Sex",
   values: [MALE, FEMALE],
@@ -114,6 +119,11 @@ export const BIOLOGICAL_SEX: SelectCategoryView = {
  * Genus Species select category view
  */
 export const GENUS_SPECIES: SelectCategoryView = {
+  annotation: {
+    description:
+      "The scientific name of the organism from which the sample was derived.",
+    label: "Genus Species",
+  },
   key: "genusSpecies",
   label: "Genus Species",
   values: [HOMO_SAPIENS, MUS_MUSCLES],
@@ -123,7 +133,11 @@ export const GENUS_SPECIES: SelectCategoryView = {
  * Donor Count range category view
  */
 export const DONOR_COUNT: RangeCategoryView = {
-  key: "Donor Count",
+  annotation: {
+    description: "The number of unique donors contributing to the dataset.",
+    label: "Donor Count",
+  },
+  key: "donorCount",
   label: "Donor Count",
   max: 200,
   min: 10,
@@ -135,6 +149,11 @@ export const DONOR_COUNT: RangeCategoryView = {
  * File Format select category view
  */
 export const FILE_FORMAT: SelectCategoryView = {
+  annotation: {
+    description:
+      "The format of the file, such as BAM, CSV, FASTQ, or TSV, indicating how the data is structured.",
+    label: "File Format",
+  },
   key: "fileFormat",
   label: "File Format",
   values: [BAM, CSV, FASTQ, TSV],
@@ -144,6 +163,11 @@ export const FILE_FORMAT: SelectCategoryView = {
  * File Type select category view
  */
 export const FILE_TYPE: SelectCategoryView = {
+  annotation: {
+    description:
+      "The type of file, indicating whether the data is raw or has been processed.",
+    label: "File Type",
+  },
   isDisabled: true,
   key: "fileType",
   label: "File Type",

src/components/common/Tabs/tabs.tsx

@@ -81,7 +81,11 @@ function buildTabLabel(
   annotation?: DataDictionaryAnnotation,
 ): ReactElement {
   return (
-    <Tooltip description={annotation?.description} title={annotation?.label}>
+    <Tooltip
+      description={annotation?.description}
+      enterDelay={300}
+      title={annotation?.label}
+    >
       <span>{count ? `${label} (${count})` : label}</span>
     </Tooltip>
   );