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/inputs/DropdownInput.svelte

@@ -21,7 +21,9 @@
 	export let interactive = true;
 	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 minWidth = 0;
 	export let maxWidth = 0;
 
@@ -98,7 +100,9 @@
 	<LayoutRow
 		class="dropdown-box"
 		classes={{ disabled, open }}
-		{tooltip}
+		{tooltipLabel}
+		{tooltipDescription}
+		{tooltipShortcut}
 		on:click={() => !disabled && (open = true)}
 		on:blur={unFocusDropdownBox}
 		tabindex={disabled ? -1 : 0}