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()

editor/src/messages/tool/common_functionality/color_selector.rs

@@ -87,7 +87,7 @@ impl ToolColorOptions {
 		} else {
 			let reset = IconButton::new("CloseX", 12)
 				.disabled(self.custom_color.is_none() && self.color_type == ToolColorType::Custom)
-				.tooltip("Clear Color")
+				.tooltip_label("Clear Color")
 				.on_update(reset_callback);
 
 			widgets.push(Separator::new(SeparatorType::Related).widget_holder());
@@ -101,8 +101,8 @@ impl ToolColorOptions {
 			("CustomColor", "Custom Color", ToolColorType::Custom),
 		]
 		.into_iter()
-		.map(|(icon, tooltip, color_type)| {
-			let mut entry = RadioEntryData::new(format!("{color_type:?}")).tooltip(tooltip).icon(icon);
+		.map(|(icon, label, color_type)| {
+			let mut entry = RadioEntryData::new(format!("{color_type:?}")).tooltip_label(label).icon(icon);
 			entry.on_update = radio_callback(color_type);
 			entry
 		})

editor/src/messages/tool/common_functionality/pivot.rs

@@ -14,7 +14,8 @@ use std::fmt;
 
 pub fn pin_pivot_widget(active: bool, enabled: bool, source: PivotToolSource) -> WidgetHolder {
 	IconButton::new(if active { "PinActive" } else { "PinInactive" }, 24)
-		.tooltip(String::from(if active { "Unpin Custom Pivot" } else { "Pin Custom Pivot" }) + "\n\nUnless pinned, the pivot will return to its prior reference point when a new selection is made.")
+		.tooltip_label(if active { "Unpin Custom Pivot" } else { "Pin Custom Pivot" })
+		.tooltip_description("Unless pinned, the pivot will return to its prior reference point when a new selection is made.")
 		.disabled(!enabled)
 		.on_update(move |_| match source {
 			PivotToolSource::Select => SelectToolMessage::SelectOptions {
@@ -31,7 +32,8 @@ pub fn pin_pivot_widget(active: bool, enabled: bool, source: PivotToolSource) ->
 
 pub fn pivot_reference_point_widget(disabled: bool, reference_point: ReferencePoint, source: PivotToolSource) -> WidgetHolder {
 	ReferencePointInput::new(reference_point)
-		.tooltip("Custom Pivot Reference Point\n\nPlaces the pivot at a corner, edge, or center of the selection bounds, unless it is dragged elsewhere.")
+		.tooltip_label("Custom Pivot Reference Point")
+		.tooltip_description("Places the pivot at a corner, edge, or center of the selection bounds, unless it is dragged elsewhere.")
 		.disabled(disabled)
 		.on_update(move |pivot_input: &ReferencePointInput| match source {
 			PivotToolSource::Select => SelectToolMessage::SetPivot { position: pivot_input.value }.into(),
@@ -62,11 +64,13 @@ pub fn pivot_gizmo_type_widget(state: PivotGizmoState, source: PivotToolSource)
 
 	vec![
 		CheckboxInput::new(!state.disabled)
-			.tooltip(
-				"Pivot Gizmo\n\
-				\n\
+			.tooltip_label("Pivot Gizmo")
+			.tooltip_description(
+				"
 				Enabled: the chosen gizmo type is shown and used to control rotation and scaling.\n\
-				Disabled: rotation and scaling occurs about the center of the selection bounds.",
+				Disabled: rotation and scaling occurs about the center of the selection bounds.
+				"
+				.trim(),
 			)
 			.on_update(move |optional_input: &CheckboxInput| match source {
 				PivotToolSource::Select => SelectToolMessage::SelectOptions {
@@ -86,14 +90,16 @@ pub fn pivot_gizmo_type_widget(state: PivotGizmoState, source: PivotToolSource)
 				PivotGizmoType::Average => 1,
 				PivotGizmoType::Active => 2,
 			}))
-			.tooltip(
-				"Pivot Gizmo Type\n\
-				\n\
+			.tooltip_label("Pivot Gizmo Type")
+			.tooltip_description(
+				"
 				Selects which gizmo type is shown and used as the center of rotation/scaling transformations.\n\
 				\n\
 				Custom Pivot: rotates and scales relative to the selection bounds, or elsewhere if dragged.\n\
 				Origin (Average Point): rotates and scales about the average point of all selected layer origins.\n\
-				Origin (Active Object): rotates and scales about the origin of the most recently selected layer.",
+				Origin (Active Object): rotates and scales about the origin of the most recently selected layer.
+				"
+				.trim(),
 			)
 			.disabled(state.disabled)
 			.widget_holder(),

editor/src/messages/tool/common_functionality/shapes/shape_utility.rs

@@ -52,7 +52,7 @@ impl ShapeType {
 		.into()
 	}
 
-	pub fn tooltip(&self) -> String {
+	pub fn tooltip_label(&self) -> String {
 		(match self {
 			Self::Line => "Line Tool",
 			Self::Rectangle => "Rectangle Tool",
@@ -62,6 +62,14 @@ impl ShapeType {
 		.into()
 	}
 
+	pub fn tooltip_description(&self) -> String {
+		(match self {
+			// TODO: Add descriptions to all the shape tools
+			_ => "",
+		})
+		.into()
+	}
+
 	pub fn icon_name(&self) -> String {
 		(match self {
 			Self::Line => "VectorLineTool",