Replace text-only tooltips with custom richly styled tooltips (#3436)

* Replace the title attribute with custom FloatingMenu tooltips

* Separate tooltip labels and descriptions into two styled blocks

* Move keyboard shortcut tooltips to a separate section at the bottom

* Update shortcut key styling in tooltips and hints bar

* Fix .to_string()

frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte

@@ -4,12 +4,14 @@
 
 	export let labels: string[];
 	export let disabled = false;
-	export let tooltip: string | undefined = undefined;
+	export let tooltipLabel: string | undefined = undefined;
+	export let tooltipDescription: string | undefined = undefined;
+	export let tooltipShortcut: string | undefined = undefined;
 	// Callbacks
 	export let action: (index: number) => void;
 </script>
 
-<LayoutRow class="breadcrumb-trail-buttons" {tooltip}>
+<LayoutRow class="breadcrumb-trail-buttons" {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
 	{#each labels as label, index}
 		<TextButton {label} emphasized={index === labels.length - 1} {disabled} action={() => !disabled && index !== labels.length - 1 && action(index)} />
 	{/each}

frontend/src/components/widgets/buttons/IconButton.svelte

@@ -8,7 +8,9 @@
 	export let size: IconSize;
 	export let disabled = false;
 	export let active = false;
-	export let tooltip: string | undefined = undefined;
+	export let tooltipLabel: string | undefined = undefined;
+	export let tooltipDescription: string | undefined = undefined;
+	export let tooltipShortcut: string | undefined = undefined;
 	// Callbacks
 	export let action: (e?: MouseEvent) => void;
 
@@ -28,7 +30,9 @@
 	class:active
 	on:click={action}
 	{disabled}
-	title={tooltip}
+	data-tooltip-label={tooltipLabel}
+	data-tooltip-description={tooltipDescription}
+	data-tooltip-shortcut={tooltipShortcut}
 	tabindex={active ? -1 : 0}
 	{...$$restProps}
 >

frontend/src/components/widgets/buttons/ImageButton.svelte

@@ -8,7 +8,9 @@
 	export let image: string;
 	export let width: string | undefined;
 	export let height: string | undefined;
-	export let tooltip: string | undefined = undefined;
+	export let tooltipLabel: string | undefined = undefined;
+	export let tooltipDescription: string | undefined = undefined;
+	export let tooltipShortcut: string | undefined = undefined;
 	// Callbacks
 	export let action: (e?: MouseEvent) => void;
 
@@ -17,7 +19,17 @@
 		.join(" ");
 </script>
 
-<img src={IMAGE_BASE64_STRINGS[image]} style:width style:height class={`image-button ${className} ${extraClasses}`.trim()} title={tooltip} alt="" on:click={action} />
+<img
+	src={IMAGE_BASE64_STRINGS[image]}
+	style:width
+	style:height
+	class={`image-button ${className} ${extraClasses}`.trim()}
+	data-tooltip-label={tooltipLabel}
+	data-tooltip-description={tooltipDescription}
+	data-tooltip-shortcut={tooltipShortcut}
+	alt=""
+	on:click={action}
+/>
 
 <style lang="scss" global>
 	.image-button {

frontend/src/components/widgets/buttons/ParameterExposeButton.svelte

@@ -5,7 +5,9 @@
 
 	export let exposed: boolean;
 	export let dataType: FrontendGraphDataType;
-	export let tooltip: string | undefined = undefined;
+	export let tooltipLabel: string | undefined = undefined;
+	export let tooltipDescription: string | undefined = undefined;
+	export let tooltipShortcut: string | undefined = undefined;
 	// Callbacks
 	export let action: (e?: MouseEvent) => void;
 </script>
@@ -16,7 +18,9 @@
 		style:--data-type-color={`var(--color-data-${dataType.toLowerCase()})`}
 		style:--data-type-color-dim={`var(--color-data-${dataType.toLowerCase()}-dim)`}
 		on:click={action}
-		title={tooltip}
+		data-tooltip-label={tooltipLabel}
+		data-tooltip-description={tooltipDescription}
+		data-tooltip-shortcut={tooltipShortcut}
 		tabindex="-1"
 	>
 		{#if !exposed}

frontend/src/components/widgets/buttons/PopoverButton.svelte

@@ -11,7 +11,9 @@
 	export let style: PopoverButtonStyle = "DropdownArrow";
 	export let menuDirection: MenuDirection = "Bottom";
 	export let icon: IconName | undefined = undefined;
-	export let tooltip: string | undefined = undefined;
+	export let tooltipLabel: string | undefined = undefined;
+	export let tooltipDescription: string | undefined = undefined;
+	export let tooltipShortcut: string | undefined = undefined;
 	export let disabled = false;
 	export let popoverMinWidth = 1;
 
@@ -27,9 +29,20 @@
 </script>
 
 <LayoutRow class="popover-button" classes={{ "has-icon": icon !== undefined, "direction-top": menuDirection === "Top" }}>
-	<IconButton class="dropdown-icon" classes={{ open }} {disabled} action={() => onClick()} icon={style || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner />
+	<IconButton
+		class="dropdown-icon"
+		classes={{ open }}
+		{disabled}
+		action={() => onClick()}
+		icon={style || "DropdownArrow"}
+		size={16}
+		{tooltipLabel}
+		{tooltipDescription}
+		{tooltipShortcut}
+		data-floating-menu-spawner
+	/>
 	{#if icon !== undefined}
-		<IconLabel class="descriptive-icon" classes={{ open }} {disabled} {icon} {tooltip} />
+		<IconLabel class="descriptive-icon" classes={{ open }} {disabled} {icon} {tooltipLabel} {tooltipDescription} {tooltipShortcut} />
 	{/if}
 
 	<FloatingMenu {open} on:open={({ detail }) => (open = detail)} minWidth={popoverMinWidth} type="Popover" direction={menuDirection || "Bottom"}>

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -20,7 +20,9 @@
 	export let minWidth = 0;
 	export let disabled = false;
 	export let narrow = false;
-	export let tooltip: string | undefined = undefined;
+	export let tooltipLabel: string | undefined = undefined;
+	export let tooltipDescription: string | undefined = undefined;
+	export let tooltipShortcut: string | undefined = undefined;
 	export let menuListChildren: MenuListEntry[][] | undefined = undefined;
 
 	// Callbacks
@@ -59,7 +61,9 @@
 		class:narrow
 		class:flush
 		style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
-		title={tooltip}
+		data-tooltip-label={tooltipLabel}
+		data-tooltip-description={tooltipDescription}
+		data-tooltip-shortcut={tooltipShortcut}
 		data-emphasized={emphasized || undefined}
 		data-disabled={disabled || undefined}
 		data-text-button