@deck.gl/widgets 9.4.0-alpha.2 → 9.4.0-beta.3

package/src/compass-widget.tsx

@@ -5,6 +5,7 @@
 import {Widget, FlyToInterpolator, WebMercatorViewport, _GlobeViewport} from '@deck.gl/core';
 import type {Viewport, WidgetPlacement, WidgetProps} from '@deck.gl/core';
 import {render} from 'preact';
+import {Tooltip} from './lib/components/tooltip';
 
 export type CompassWidgetProps = WidgetProps & {
   /** Widget positioning within the view. Default 'top-left'. */
@@ -13,6 +14,8 @@ export type CompassWidgetProps = WidgetProps & {
   viewId?: string | null;
   /** Tooltip message. */
   label?: string;
+  /** Custom tooltip content. Overrides label for tooltip display. */
+  tooltip?: string | HTMLElement | false;
   /** Bearing and pitch reset transition duration in ms. */
   transitionDuration?: number;
   /**
@@ -36,6 +39,7 @@ export class CompassWidget extends Widget<CompassWidgetProps> {
     placement: 'top-left',
     viewId: null,
     label: 'Reset Compass',
+    tooltip: undefined!,
     transitionDuration: 200,
     onReset: () => {}
   };
@@ -60,31 +64,35 @@ export class CompassWidget extends Widget<CompassWidgetProps> {
     const widgetViewport = this.viewports[viewId];
     const [rz, rx] = this.getRotation(widgetViewport);
 
+    const tooltipContent =
+      this.props.tooltip === false ? undefined : (this.props.tooltip ?? this.props.label);
     const ui = (
       <div className="deck-widget-button" style={{perspective: 100}}>
-        <button
-          type="button"
-          onClick={() => {
-            for (const viewport of Object.values(this.viewports)) {
-              this.handleCompassReset(viewport);
-            }
-          }}
-          title={this.props.label}
-          style={{transform: `rotateX(${rx}deg)`}}
-        >
-          <svg fill="none" width="100%" height="100%" viewBox="0 0 26 26">
-            <g transform={`rotate(${rz},13,13)`}>
-              <path
-                d="M10 13.0001L12.9999 5L15.9997 13.0001H10Z"
-                fill="var(--icon-compass-north-color, rgb(240, 92, 68))"
-              />
-              <path
-                d="M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z"
-                fill="var(--icon-compass-south-color, rgb(204, 204, 204))"
-              />
-            </g>
-          </svg>
-        </button>
+        <Tooltip content={tooltipContent}>
+          <button
+            type="button"
+            onClick={() => {
+              for (const viewport of Object.values(this.viewports)) {
+                this.handleCompassReset(viewport);
+              }
+            }}
+            aria-label={this.props.label}
+            style={{transform: `rotateX(${rx}deg)`}}
+          >
+            <svg fill="none" width="100%" height="100%" viewBox="0 0 26 26">
+              <g transform={`rotate(${rz},13,13)`}>
+                <path
+                  d="M10 13.0001L12.9999 5L15.9997 13.0001H10Z"
+                  fill="var(--icon-compass-north-color, rgb(240, 92, 68))"
+                />
+                <path
+                  d="M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z"
+                  fill="var(--icon-compass-south-color, rgb(204, 204, 204))"
+                />
+              </g>
+            </svg>
+          </button>
+        </Tooltip>
       </div>
     );
 

package/src/fullscreen-widget.tsx

@@ -19,6 +19,10 @@ export type FullscreenWidgetProps = WidgetProps & {
   enterLabel?: string;
   /** Tooltip message when fullscreen. */
   exitLabel?: string;
+  /** Custom tooltip content when out of fullscreen. Overrides enterLabel for tooltip display. */
+  enterTooltip?: string | HTMLElement | false;
+  /** Custom tooltip content when fullscreen. Overrides exitLabel for tooltip display. */
+  exitTooltip?: string | HTMLElement | false;
   /**
    * A compatible DOM element which should be made full screen. By default, the map container element will be made full screen.
    * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements
@@ -38,6 +42,8 @@ export class FullscreenWidget extends Widget<FullscreenWidgetProps> {
     viewId: null,
     enterLabel: 'Enter Fullscreen',
     exitLabel: 'Exit Fullscreen',
+    enterTooltip: undefined!,
+    exitTooltip: undefined!,
     container: undefined!,
     onFullscreenChange: () => {}
   };
@@ -67,6 +73,7 @@ export class FullscreenWidget extends Widget<FullscreenWidgetProps> {
           this.handleClick().catch(err => log.error(err)());
         }}
         label={isFullscreen ? this.props.exitLabel : this.props.enterLabel}
+        tooltip={isFullscreen ? this.props.exitTooltip : this.props.enterTooltip}
         className={isFullscreen ? 'deck-widget-fullscreen-exit' : 'deck-widget-fullscreen-enter'}
       />,
       rootElement

package/src/gimbal-widget.tsx

@@ -5,6 +5,7 @@
 import {Widget, LinearInterpolator} from '@deck.gl/core';
 import type {Viewport, WidgetPlacement, WidgetProps} from '@deck.gl/core';
 import {render} from 'preact';
+import {Tooltip} from './lib/components/tooltip';
 
 export type GimbalWidgetProps = WidgetProps & {
   placement?: WidgetPlacement;
@@ -12,6 +13,8 @@ export type GimbalWidgetProps = WidgetProps & {
   viewId?: string | null;
   /** Tooltip message. */
   label?: string;
+  /** Custom tooltip content. Overrides label for tooltip display. */
+  tooltip?: string | HTMLElement | false;
   /** Width of gimbal lines. */
   strokeWidth?: number;
   /** Transition duration in ms when resetting rotation. */
@@ -37,6 +40,7 @@ export class GimbalWidget extends Widget<GimbalWidgetProps> {
     placement: 'top-left',
     viewId: null,
     label: 'Gimbal',
+    tooltip: undefined!,
     strokeWidth: 1.5,
     transitionDuration: 200,
     onReset: () => {}
@@ -62,64 +66,68 @@ export class GimbalWidget extends Widget<GimbalWidgetProps> {
     const widgetViewport = this.viewports[viewId];
     const {rotationOrbit, rotationX} = this.getNormalizedRotation(widgetViewport);
     // Note - we use CSS 3D transforms instead of SVG 2D transforms
+    const tooltipContent =
+      this.props.tooltip === false ? undefined : (this.props.tooltip ?? this.props.label);
     const ui = (
       <div className="deck-widget-button" style={{perspective: 100, pointerEvents: 'auto'}}>
-        <button
-          type="button"
-          onClick={() => {
-            for (const viewport of Object.values(this.viewports)) {
-              this.resetOrbitView(viewport);
-            }
-          }}
-          title={this.props.label}
-          style={{position: 'relative', width: 26, height: 26}}
-        >
-          {/* Outer ring */}
-          <svg
-            className="gimbal-outer-ring"
-            width="100%"
-            height="100%"
-            viewBox="0 0 26 26"
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              transform: `rotateY(${rotationOrbit}deg)`
+        <Tooltip content={tooltipContent}>
+          <button
+            type="button"
+            onClick={() => {
+              for (const viewport of Object.values(this.viewports)) {
+                this.resetOrbitView(viewport);
+              }
             }}
+            aria-label={this.props.label}
+            style={{position: 'relative', width: 26, height: 26}}
           >
-            <circle
-              cx="13"
-              cy="13"
-              r="10"
-              stroke="var(--icon-gimbal-outer-color, rgb(68, 92, 204))"
-              strokeWidth={this.props.strokeWidth}
-              fill="none"
-            />
-          </svg>
-
-          {/* Inner ring */}
-          <svg
-            className="gimbal-inner-ring"
-            width="100%"
-            height="100%"
-            viewBox="0 0 26 26"
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              transform: `rotateX(${rotationX}deg)`
-            }}
-          >
-            <circle
-              cx="13"
-              cy="13"
-              r="7"
-              stroke="var(--icon-gimbal-inner-color, rgb(240, 92, 68))"
-              strokeWidth={this.props.strokeWidth}
-              fill="none"
-            />
-          </svg>
-        </button>
+            {/* Outer ring */}
+            <svg
+              className="gimbal-outer-ring"
+              width="100%"
+              height="100%"
+              viewBox="0 0 26 26"
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                transform: `rotateY(${rotationOrbit}deg)`
+              }}
+            >
+              <circle
+                cx="13"
+                cy="13"
+                r="10"
+                stroke="var(--icon-gimbal-outer-color, rgb(68, 92, 204))"
+                strokeWidth={this.props.strokeWidth}
+                fill="none"
+              />
+            </svg>
+
+            {/* Inner ring */}
+            <svg
+              className="gimbal-inner-ring"
+              width="100%"
+              height="100%"
+              viewBox="0 0 26 26"
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                transform: `rotateX(${rotationX}deg)`
+              }}
+            >
+              <circle
+                cx="13"
+                cy="13"
+                r="7"
+                stroke="var(--icon-gimbal-inner-color, rgb(240, 92, 68))"
+                strokeWidth={this.props.strokeWidth}
+                fill="none"
+              />
+            </svg>
+          </button>
+        </Tooltip>
       </div>
     );
 

package/src/icon-widget.tsx

@@ -16,6 +16,8 @@ export type IconWidgetProps = WidgetProps & {
   icon: string;
   /** Tooltip label */
   label?: string;
+  /** Custom tooltip content. Overrides label for tooltip display. */
+  tooltip?: string | HTMLElement | false;
   /** Icon color, a CSS Color string */
   color?: string;
   /** Callback when the widget is clicked */
@@ -33,6 +35,7 @@ export class IconWidget extends Widget<IconWidgetProps> {
     viewId: null,
     icon: '',
     label: '',
+    tooltip: undefined!,
     color: '',
     onClick: undefined!
   };
@@ -52,7 +55,7 @@ export class IconWidget extends Widget<IconWidgetProps> {
   }
 
   onRenderHTML(rootElement: HTMLElement): void {
-    const {className, style, icon, color, label, onClick} = this.props;
+    const {className, style, icon, color, label, tooltip, onClick} = this.props;
 
     render(
       <IconButton
@@ -61,6 +64,7 @@ export class IconWidget extends Widget<IconWidgetProps> {
         color={color}
         icon={icon}
         label={label}
+        tooltip={tooltip}
         onClick={onClick}
       />,
       rootElement

package/src/icons/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z"/></svg>

package/src/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>

package/src/icons/chevron-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>

package/src/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>

package/src/icons/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z"/></svg>

package/src/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -120 120 120" fill="black"><path d="m32-25-7-7 28-28-28-28 7-7 28 28 28-28 7 7-28 28 28 28-7 7-28-28-28 28Z"/></svg>

package/src/icons/dark-mode.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-120q-151 0-255.5-104.5T120-480q0-138 90-239.5T440-838q13-2 23 3.5t16 14.5q6 9 6.5 21t-7.5 23q-17 26-25.5 55t-8.5 61q0 90 63 153t153 63q31 0 61.5-9t54.5-25q11-7 22.5-6.5T819-479q10 5 15.5 15t3.5 24q-14 138-117.5 229T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>

package/src/icons/dropdown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>

package/src/icons/fullscreen-exit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M240-240h-80q-17 0-28.5-11.5T120-280q0-17 11.5-28.5T160-320h120q17 0 28.5 11.5T320-280v120q0 17-11.5 28.5T280-120q-17 0-28.5-11.5T240-160v-80Zm480 0v80q0 17-11.5 28.5T680-120q-17 0-28.5-11.5T640-160v-120q0-17 11.5-28.5T680-320h120q17 0 28.5 11.5T840-280q0 17-11.5 28.5T800-240h-80ZM240-720v-80q0-17 11.5-28.5T280-840q17 0 28.5 11.5T320-800v120q0 17-11.5 28.5T280-640H160q-17 0-28.5-11.5T120-680q0-17 11.5-28.5T160-720h80Zm480 0h80q17 0 28.5 11.5T840-680q0 17-11.5 28.5T800-640H680q-17 0-28.5-11.5T640-680v-120q0-17 11.5-28.5T680-840q17 0 28.5 11.5T720-800v80Z"/></svg>

package/src/icons/fullscreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M200-200h80q17 0 28.5 11.5T320-160q0 17-11.5 28.5T280-120H160q-17 0-28.5-11.5T120-160v-120q0-17 11.5-28.5T160-320q17 0 28.5 11.5T200-280v80Zm560 0v-80q0-17 11.5-28.5T800-320q17 0 28.5 11.5T840-280v120q0 17-11.5 28.5T800-120H680q-17 0-28.5-11.5T640-160q0-17 11.5-28.5T680-200h80ZM200-760v80q0 17-11.5 28.5T160-640q-17 0-28.5-11.5T120-680v-120q0-17 11.5-28.5T160-840h120q17 0 28.5 11.5T320-800q0 17-11.5 28.5T280-760h-80Zm560 0h-80q-17 0-28.5-11.5T640-800q0-17 11.5-28.5T680-840h120q17 0 28.5 11.5T840-800v120q0 17-11.5 28.5T800-640q-17 0-28.5-11.5T760-680v-80Z"/></svg>

package/src/icons/light-mode.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M565-395q35-35 35-85t-35-85q-35-35-85-35t-85 35q-35 35-35 85t35 85q35 35 85 35t85-35Zm-226.5 56.5Q280-397 280-480t58.5-141.5Q397-680 480-680t141.5 58.5Q680-563 680-480t-58.5 141.5Q563-280 480-280t-141.5-58.5ZM80-440q-17 0-28.5-11.5T40-480q0-17 11.5-28.5T80-520h80q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440H80Zm720 0q-17 0-28.5-11.5T760-480q0-17 11.5-28.5T800-520h80q17 0 28.5 11.5T920-480q0 17-11.5 28.5T880-440h-80ZM451.5-771.5Q440-783 440-800v-80q0-17 11.5-28.5T480-920q17 0 28.5 11.5T520-880v80q0 17-11.5 28.5T480-760q-17 0-28.5-11.5Zm0 720Q440-63 440-80v-80q0-17 11.5-28.5T480-200q17 0 28.5 11.5T520-160v80q0 17-11.5 28.5T480-40q-17 0-28.5-11.5ZM226-678l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226-678Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734-282l43 42q12 11 11.5 28T777-183q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678-734l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183-183q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282-226l-42 43q-11 12-28 11.5T183-183Zm297-297Z"/></svg>

package/src/icons/loading.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>

package/src/icons/pause.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/></svg>

package/src/icons/photo-camera.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l50-54q11-12 26.5-19t32.5-7h170q17 0 32.5 7t26.5 19l50 54h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/></svg>

package/src/icons/play-arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M320-200v-560l440 280-440 280Z"/></svg>

package/src/icons/remove.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M240-440q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h480q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H240Z"/></svg>

package/src/icons/reset-focus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M540-420v70q0 13-8.5 21.5T510-320q-13 0-21.5-8.5T480-350v-90q0-17 11.5-28.5T520-480h90q13 0 21.5 8.5T640-450q0 13-8.5 21.5T610-420h-70Zm0 280h70q13 0 21.5 8.5T640-110q0 13-8.5 21.5T610-80h-90q-17 0-28.5-11.5T480-120v-90q0-13 8.5-21.5T510-240q13 0 21.5 8.5T540-210v70Zm280-280h-70q-13 0-21.5-8.5T720-450q0-13 8.5-21.5T750-480h90q17 0 28.5 11.5T880-440v90q0 13-8.5 21.5T850-320q-13 0-21.5-8.5T820-350v-70Zm0 280v-70q0-13 8.5-21.5T850-240q13 0 21.5 8.5T880-210v90q0 17-11.5 28.5T840-80h-90q-13 0-21.5-8.5T720-110q0-13 8.5-21.5T750-140h70ZM480-760q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-70q0-17 11.5-28.5T360-360q17 0 28.5 11.5T400-320v160q0 17-11.5 28.5T360-120H200q-17 0-28.5-11.5T160-160q0-17 11.5-28.5T200-200h54q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q114 0 204 62.5T814-615q6 16 0 31t-22 21q-16 6-31.5 0T739-585q-31-78-100.5-126.5T480-760Z"/></svg>

package/src/index.ts

@@ -66,6 +66,7 @@ export type {DeckWidgetTheme} from './themes';
 // Experimental preact components
 export {ButtonGroup as _ButtonGroup, type ButtonGroupProps} from './lib/components/button-group';
 export {IconButton as _IconButton, type IconButtonProps} from './lib/components/icon-button';
+export {Tooltip as _Tooltip, type TooltipProps} from './lib/components/tooltip';
 export {
   DropdownMenu as _DropdownMenu,
   type DropdownMenuProps,

package/src/lib/components/icon-button.tsx

@@ -5,11 +5,14 @@
 import type {ComponentChildren, JSX} from 'preact';
 import {useMemo} from 'preact/hooks';
 import {getCSSMask} from '../data-url';
+import {Tooltip} from './tooltip';
 
 export type IconButtonProps = {
   className?: string;
   icon?: string;
   label?: string;
+  /** Custom tooltip content. Overrides label for tooltip display. */
+  tooltip?: string | ComponentChildren | false;
   color?: string;
   style?: JSX.CSSProperties;
   onClick?: JSX.MouseEventHandler<HTMLButtonElement>;
@@ -18,7 +21,8 @@ export type IconButtonProps = {
 
 /** Renders a button component with widget CSS */
 export const IconButton = (props: IconButtonProps) => {
-  const {className = '', style, color, icon, label, onClick, children} = props;
+  const {className = '', style, color, icon, label, tooltip, onClick, children} = props;
+  const tooltipContent = tooltip === false ? undefined : (tooltip ?? label);
 
   const iconStyle = useMemo(() => {
     const css: JSX.CSSProperties | undefined = getCSSMask(icon);
@@ -26,16 +30,20 @@ export const IconButton = (props: IconButtonProps) => {
     return {...css, backgroundColor: color};
   }, [color, icon]);
 
+  const button = (
+    <button
+      className={`deck-widget-icon-button ${className}`}
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+    >
+      {children ? children : <div className="deck-widget-icon" style={iconStyle} />}
+    </button>
+  );
+
   return (
     <div className="deck-widget-button" style={style}>
-      <button
-        className={`deck-widget-icon-button ${className}`}
-        type="button"
-        onClick={onClick}
-        title={label}
-      >
-        {children ? children : <div className="deck-widget-icon" style={iconStyle} />}
-      </button>
+      {tooltipContent ? <Tooltip content={tooltipContent}>{button}</Tooltip> : button}
     </div>
   );
 };

package/src/lib/components/tooltip.tsx

@@ -0,0 +1,116 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ComponentChildren} from 'preact';
+import {useRef, useState, useEffect, useCallback} from 'preact/hooks';
+import {autoUpdate, computePosition, flip, shift, offset, type Placement} from '@floating-ui/dom';
+
+export type TooltipProps = {
+  /** Tooltip content — string or Preact children. */
+  content: string | ComponentChildren;
+  /** Position relative to the trigger.
+   * @default 'right'
+   */
+  placement?: Placement;
+  /** The trigger element */
+  children: ComponentChildren;
+};
+
+export const Tooltip = ({content, placement = 'right', children}: TooltipProps) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+  const delayRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const show = useCallback(() => {
+    clearTimeout(delayRef.current);
+    setVisible(true);
+  }, []);
+
+  const hide = useCallback(() => {
+    clearTimeout(delayRef.current);
+    setVisible(false);
+  }, []);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') hide();
+    },
+    [hide]
+  );
+
+  useEffect(() => {
+    const tooltip = tooltipRef.current;
+    const trigger = wrapperRef.current?.firstElementChild as HTMLElement | null;
+    if (!visible || !tooltip || !trigger) return undefined;
+
+    const updatePosition = () => {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      computePosition(trigger, tooltip, {
+        placement,
+        strategy: 'fixed',
+        middleware: [offset(8), flip(), shift({padding: 4})]
+      }).then(({x, y}) => {
+        if (tooltipRef.current === tooltip) {
+          Object.assign(tooltip.style, {left: `${x}px`, top: `${y}px`, opacity: '1'});
+        }
+      });
+    };
+
+    return autoUpdate(trigger, tooltip, updatePosition);
+  }, [visible, placement]);
+
+  useEffect(() => {
+    return () => clearTimeout(delayRef.current);
+  }, []);
+
+  const htmlRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (el && content instanceof HTMLElement) {
+        el.replaceChildren(content.cloneNode(true));
+      }
+    },
+    [content]
+  );
+
+  const renderContent = () => {
+    if (content instanceof HTMLElement) {
+      return <div ref={htmlRef} />;
+    }
+    return content;
+  };
+
+  if (content === null || content === undefined || content === false || content === '') {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      ref={wrapperRef}
+      className="deck-widget-tooltip-trigger"
+      onPointerEnter={show}
+      onPointerLeave={hide}
+      onFocusCapture={show}
+      onBlurCapture={hide}
+      onKeyDown={onKeyDown}
+    >
+      {children}
+      {visible && (
+        <div
+          ref={tooltipRef}
+          className="deck-widget-tooltip"
+          role="tooltip"
+          style={{
+            position: 'fixed',
+            opacity: 0,
+            fontSize: '12px',
+            padding: '4px 8px'
+          }}
+        >
+          {renderContent()}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/loading-widget.tsx

@@ -15,6 +15,8 @@ export type LoadingWidgetProps = WidgetProps & {
   viewId?: string | null;
   /** Tooltip message when loading */
   label?: string;
+  /** Custom tooltip content. Overrides label for tooltip display. */
+  tooltip?: string | HTMLElement | false;
   /**
    * Callback when the loading state changes.
    * Called when layers transition between loading and loaded states.
@@ -32,6 +34,7 @@ export class LoadingWidget extends Widget<LoadingWidgetProps> {
     placement: 'top-left',
     viewId: null,
     label: 'Loading layer data',
+    tooltip: undefined!,
     onLoadingChange: () => {}
   };
 
@@ -57,6 +60,7 @@ export class LoadingWidget extends Widget<LoadingWidgetProps> {
         <IconButton
           className="deck-widget-spinner"
           label={this.props.label}
+          tooltip={this.props.tooltip}
           onClick={this.handleClick.bind(this)}
         />
       ),

package/src/reset-view-widget.tsx

@@ -17,6 +17,8 @@ export type ResetViewWidgetProps<ViewsT extends ViewOrViews = null> = WidgetProp
   placement?: WidgetPlacement;
   /** Tooltip message */
   label?: string;
+  /** Custom tooltip content. Overrides label for tooltip display. */
+  tooltip?: string | HTMLElement | false;
   /** The initial view state to reset the view to. Defaults to deck.props.initialViewState */
   initialViewState?: ViewStateMap<ViewsT>;
   /** View to interact with. Required when using multiple views. */
@@ -44,6 +46,7 @@ export class ResetViewWidget<ViewsT extends ViewOrViews = null> extends Widget<
     id: 'reset-view',
     placement: 'top-left',
     label: 'Reset View',
+    tooltip: undefined!,
     initialViewState: undefined!,
     viewId: null,
     onReset: () => {}
@@ -68,6 +71,7 @@ export class ResetViewWidget<ViewsT extends ViewOrViews = null> extends Widget<
       <IconButton
         className="deck-widget-reset-focus"
         label={this.props.label}
+        tooltip={this.props.tooltip}
         onClick={this.handleClick.bind(this)}
       />,
       rootElement

package/src/screenshot-widget.tsx

@@ -16,6 +16,8 @@ export type ScreenshotWidgetProps = WidgetProps & {
   viewId?: string | null;
   /** Tooltip message */
   label?: string;
+  /** Custom tooltip content. Overrides label for tooltip display. */
+  tooltip?: string | HTMLElement | false;
   /** Filename to save to */
   filename?: string;
   /** Image format */
@@ -35,6 +37,7 @@ export class ScreenshotWidget extends Widget<ScreenshotWidgetProps> {
     placement: 'top-left',
     viewId: null,
     label: 'Screenshot',
+    tooltip: undefined!,
     filename: 'screenshot.png',
     imageFormat: 'image/png',
     onCapture: undefined!
@@ -59,6 +62,7 @@ export class ScreenshotWidget extends Widget<ScreenshotWidgetProps> {
       <IconButton
         className="deck-widget-camera"
         label={this.props.label}
+        tooltip={this.props.tooltip}
         onClick={this.handleClick.bind(this)}
       />,
       rootElement