Merge pull request #3002 from specify/tooltips

Use a tooltips library

specifyweb/frontend/js_src/css/main.css

@@ -53,9 +53,9 @@
   textarea,
   .textarea-shadow,
   select {
-    @apply p-1 rounded accent-brand-200 dark:accent-brand-400 ring-gray-400 shadow-sm
-      ring-1 dark:ring-0 border-none bg-[color:var(--field-background)]
-      text-[length:inherit] leading-[unset]
+    @apply rounded border-none bg-[color:var(--field-background)] p-1 text-[length:inherit] leading-[unset]
+      accent-brand-200 shadow-sm ring-1 ring-gray-400
+      dark:accent-brand-400 dark:ring-0
       [.has-alt-background_&]:optional:bg-white
       dark:[.has-alt-background_&]:optional:bg-neutral-900;
   }
@@ -197,18 +197,6 @@
     @apply rounded bg-brand-200 dark:bg-brand-400;
   }
 
-  /* Display tooltips as an overlay on touch-screen devices */
-  @media (pointer: coarse), (hover: none) {
-    [title] {
-      @apply relative inline-flex justify-center;
-    }
-
-    [title]:focus::after {
-      @apply absolute top-[90%] w-fit border border-black bg-white p-1
-        text-black content-[attr(title)];
-    }
-  }
-
   /*
    * Grid-based table implementation for increased flexibility
    * Does not sacrifice accessibility thanks to the [role] attributes

specifyweb/frontend/js_src/lib/components/Atoms/Button.tsx

@@ -53,10 +53,7 @@ const button = (name: string, className: string) =>
     type: 'button',
     disabled: props.disabled === true || props.onClick === undefined,
   }));
-/*
- * FEATURE: if onClick===undefined, button should be disabled, but only if expicily
- *   provided
- */
+
 export const Button = {
   /*
    * When using Button.LikeLink component, consider adding [role="link"] if the

specifyweb/frontend/js_src/lib/components/Atoms/index.tsx

@@ -83,3 +83,7 @@ export const Key = wrap(
   'kbd',
   'bg-gray-200 border-1 dark:border-none dark:bg-neutral-700 rounded-sm mx-1 p-0.5'
 );
+
+export const oneRem = Number.parseFloat(
+  getComputedStyle(document.documentElement).fontSize
+);

specifyweb/frontend/js_src/lib/components/Attachments/Cell.tsx

@@ -58,7 +58,6 @@ export function AttachmentCell({
         (model === undefined || hasTablePermission(model.name, 'read')) && (
           <Button.LikeLink
             className="absolute top-0 left-0"
-            title={model?.label}
             onClick={(): void =>
               model === undefined
                 ? handleMetaToggle()

specifyweb/frontend/js_src/lib/components/Core/Contexts.tsx

@@ -9,6 +9,7 @@ import { crash } from '../Errors/Crash';
 import { ErrorBoundary } from '../Errors/ErrorBoundary';
 import { loadingBar } from '../Molecules';
 import { Dialog, dialogClassNames, LoadingScreen } from '../Molecules/Dialog';
+import { TooltipManager } from '../Molecules/Tooltips';
 import {
   SetUnloadProtectsContext,
   UnloadProtectsContext,
@@ -128,6 +129,7 @@ export function Contexts({
                   {children}
                 </React.Suspense>
               </LoadingContext.Provider>
+              <TooltipManager />
             </ErrorContext.Provider>
           </ErrorBoundary>
         </SetUnloadProtectsContext.Provider>

specifyweb/frontend/js_src/lib/components/DataModel/schemaBase.ts

@@ -80,7 +80,6 @@ const domainLevels = [
 ] as const;
 
 /*
- * REFACTOR: separate schema base (domain.json) from the rest of the schema
  * Scoping information is loaded and populated here.
  */
 export const fetchContext = load<

specifyweb/frontend/js_src/lib/components/Errors/Crash.tsx

@@ -15,7 +15,6 @@ import { formatError, handleAjaxError } from './FormatError';
 export const raise = (error: Error, ...args: RA<unknown>): void =>
   showError(error, true, ...args);
 
-// FEATURE: softFail errors should be displayed in the UI as toasts
 export const softFail =
   process.env.NODE_ENV === 'development' ? raise : console.error;
 

specifyweb/frontend/js_src/lib/components/Errors/JsonError.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
+
 import { backEndText } from '../../localization/backEnd';
 import { preferencesText } from '../../localization/preferences';
 import { jsonStringify } from '../../utils/utils';
 import { className } from '../Atoms/className';
-import { TableIcon } from '../Molecules/TableIcon';
-import { schema } from '../DataModel/schema';
 import { getField } from '../DataModel/helpers';
+import { schema } from '../DataModel/schema';
+import { TableIcon } from '../Molecules/TableIcon';
 
 type JsonResponse = {
-  exception: string;
-  message: string;
-  data: any;
-  formattedData: string;
-  traceback: string;
+  readonly exception: string;
+  readonly message: string;
+  readonly data: any;
+  readonly formattedData: string;
+  readonly traceback: string;
 };
 
 function createJsonResponse(error: string): JsonResponse {
   const json = JSON.parse(error);
   const hasLocalizationKey = typeof json.data?.localizationKey === 'string';
-  const jsonResponse = {
+  return {
     exception: json.exception,
     message: hasLocalizationKey
       ? resolveBackendLocalization(json)
@@ -27,7 +28,6 @@ function createJsonResponse(error: string): JsonResponse {
     formattedData: jsonStringify(json.data, 2),
     traceback: json.traceback,
   };
-  return jsonResponse;
 }
 
 export function formatJsonBackendResponse(error: string): JSX.Element {
@@ -54,7 +54,7 @@ function JsonBackendResponseFooter({
   readonly response: JsonResponse;
   readonly isDataOpen?: boolean;
 }): JSX.Element {
-  const hasData = response.data == null ? false : true;
+  const hasData = response.data != null;
   return (
     <>
       {hasData && (
@@ -84,14 +84,12 @@ function BusinessRuleExceptionHeader({
 }): JSX.Element {
   return (
     <>
-      <div className={`flex space-x-2`}>
-        <TableIcon name={table} label={false} />
+      <div className="flex space-x-2">
+        <TableIcon label={false} name={table} />
         <h2 className={className.headerPrimary}>{exception}</h2>
       </div>
-      <div className={`flex space-x-2`}>
-        <em className={className.label} title={message}>
-          {message}
-        </em>
+      <div className="flex space-x-2">
+        <em className={className.label}>{message}</em>
       </div>
     </>
   );
@@ -105,10 +103,8 @@ function formatBasicResponse(error: string): JSX.Element {
   return (
     <>
       <h2 className={className.headerPrimary}>{response.exception}</h2>
-      <em className={className.label} title={response.message}>
-        {response.message}
-      </em>
-      <JsonBackendResponseFooter isDataOpen={true} response={response} />
+      <em className={className.label}>{response.message}</em>
+      <JsonBackendResponseFooter isDataOpen response={response} />
     </>
   );
 }
@@ -118,8 +114,8 @@ function formatBusinessRuleException(error: string): JSX.Element {
   const table: string = response.data.table;
   return (
     <>
-      <BusinessRuleExceptionHeader table={table} response={response} />
-      <JsonBackendResponseFooter response={response} isDataOpen={true} />
+      <BusinessRuleExceptionHeader response={response} table={table} />
+      <JsonBackendResponseFooter isDataOpen response={response} />
     </>
   );
 }
@@ -136,8 +132,8 @@ function formatTreeBusinessRuleException(error: string): JSX.Element {
   const table: string = response.data.tree;
   return (
     <>
-      <BusinessRuleExceptionHeader table={table} response={response} />
-      <JsonBackendResponseFooter response={response} isDataOpen={true} />
+      <BusinessRuleExceptionHeader response={response} table={table} />
+      <JsonBackendResponseFooter isDataOpen response={response} />
     </>
   );
 }

specifyweb/frontend/js_src/lib/components/FormFields/index.tsx

@@ -194,7 +194,6 @@ const fieldRenderers: {
   },
   Plugin: FormPlugin,
   FilePicker({ id, mode, name, isRequired }) {
-    // FEATURE: consider replacing this with AttachmentsPlugin for some field names
     /*
      * Not sure how this is supposed to work, thus the field is rendered as
      * disabled

specifyweb/frontend/js_src/lib/components/FormParse/cells.ts

@@ -305,7 +305,10 @@ export function parseFormCell(
   const cellClass = getParsedAttribute(cellNode, 'type') ?? '';
   const cellType = cellTypeTranslation[cellClass.toLowerCase()];
 
-  // FEATURE: warn on IDs that include spaces and other unsupported characters
+  /*
+   * FEATURE: warn on IDs that include spaces and other unsupported characters.
+   *   See https://github.com/specify/specify7/issues/2871
+   */
   const id = getParsedAttribute(cellNode, 'id');
   setLogContext({ id, type: cellType });
 

specifyweb/frontend/js_src/lib/components/FormPlugins/LatLongUi.tsx

@@ -246,7 +246,6 @@ export function LatLongUi({
                   disabled={mode === 'view'}
                   id={id}
                   name="type"
-                  title={localityText.coordinateType()}
                   value={coordinateType}
                   onValueChange={(value): void => {
                     setCoordinateType(value as CoordinateType);

specifyweb/frontend/js_src/lib/components/FormPlugins/PartialDateUi.tsx

@@ -339,7 +339,6 @@ export function PartialDateUi<SCHEMA extends AnySchema>({
           <span className="sr-only">{formsText.datePrecision()}</span>
           <Select
             className="!w-auto print:hidden"
-            title={formsText.datePrecision()}
             value={precision}
             onBlur={(): void => {
               if (moment === undefined) return;

specifyweb/frontend/js_src/lib/components/Header/Notifications.tsx

@@ -138,16 +138,16 @@ export function Notifications({
         icon={icons.bell}
         isActive={isOpen}
         isCollapsed={isCollapsed}
-        title={title}
-        onClick={handleOpen}
         props={{
           'aria-live': 'polite',
           className:
-            unreadCount > 0
+            unreadCount > 0 && !isOpen
               ? '[&:not(:hover)]:!text-brand-300 [&:not(:hover)]:dark:!text-brand-400'
               : undefined,
           disabled: notificationCount === 0,
         }}
+        title={title}
+        onClick={handleOpen}
       />
       {Array.isArray(notifications) ? (
         <Dialog

specifyweb/frontend/js_src/lib/components/Header/index.tsx

@@ -18,6 +18,7 @@ import type { MenuItem } from '../Core/Main';
 import { MenuContext } from '../Core/Main';
 import { schema } from '../DataModel/schema';
 import { userInformation } from '../InitialContext/userInformation';
+import { titleDelay, titlePosition } from '../Molecules/Tooltips';
 import { ActiveLink } from '../Router/ActiveLink';
 import { usePref } from '../UserPreferences/usePref';
 import type { MenuItemName } from './menuItemDefinitions';
@@ -219,6 +220,7 @@ export function MenuButton({
   readonly onClick: string | (() => void);
   readonly props?: TagProps<'a'> & TagProps<'button'>;
 }): JSX.Element | null {
+  const [position] = usePref('header', 'appearance', 'position');
   const getClassName = (isActive: boolean): string => `
     p-4
     ${isActive ? 'bg-brand-300 !text-white' : 'text-gray-700'}
@@ -227,6 +229,9 @@ export function MenuButton({
   `;
   const props = {
     ...extraProps,
+    [titleDelay]: 0,
+    [titlePosition]:
+      position === 'left' ? 'right' : position === 'right' ? 'left' : undefined,
     'aria-current': isActive ? 'page' : undefined,
     title: isCollapsed ? title : undefined,
   } as const;

specifyweb/frontend/js_src/lib/components/InitialContext/treeRanks.ts

@@ -50,7 +50,10 @@ const treeScopes = {
   /* eslint-enable @typescript-eslint/naming-convention */
 } as const;
 
-// FEATURE: allow reordering trees
+/*
+ * FEATURE: allow reordering trees
+ *    See https://github.com/specify/specify7/issues/2121#issuecomment-1432158152
+ */
 const commonTrees = ['Geography', 'Storage', 'Taxon'] as const;
 const treesForPaleo = ['GeologicTimePeriod', 'LithoStrat'] as const;
 const allTrees = [...commonTrees, ...treesForPaleo] as const;

specifyweb/frontend/js_src/lib/components/Leaflet/config.ts

@@ -47,7 +47,10 @@ export type LocalityPinFields = {
  */
 export const MAX_TO_MANY_INDEX = 10;
 
-// FEATURE: allow configuring this
+/*
+ * FEATURE: allow configuring this
+ *   See https://github.com/specify/specify7/issues/2431
+ */
 /**
  * NOTE:
  * Leaflet map on the Locality form and the CO Lifemapper badge is going

specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx

@@ -72,14 +72,21 @@ export const supportsBackdropBlur = globalThis.CSS.supports(
 
 /**
  * Modal or non-modal dialog. Highly customizable. Used all over the place
+ *
+ * @remarks
+ * We are using a library "react-modal" to render dialogs. It worked great so
+ * far. However, since then we started using HeadlessUI and FloatingUI, both
+ * of which already provide dialogs. Might be worth at some point to migrate
+ * to reduce number of dependencies
+ *
  * @remarks
  * Note, if the same components renders a <Dialog>, and on the next render
  * instead renders a different <Dialog> with the same parent, React would
  * reuse the same <Dialog> instance. This means, if content was scrolled down,
  * new dialog, with a different content would already be scrolled down.
  * Possible solution would be to set container.scrollTop=0 on header change,
  * though, that may introduce issues in other places, as same dialogs change
- * header durring lifecycle (ResourceView)
+ * header during lifecycle (ResourceView)
  */
 export function Dialog({
   /*