Add tooltips to the action bar

app/gui/view/graph-editor/src/component/node/action_bar.rs

@@ -1,22 +1,26 @@
 //! Definition of the `ActionBar` component for the `visualization::Container`.
 
-
-
-pub mod icon;
-
 use crate::prelude::*;
+use ensogl::display::shape::*;
 
 use enso_config::ARGS;
 use enso_frp as frp;
 use ensogl::application::Application;
 use ensogl::display;
-use ensogl::display::shape::*;
 use ensogl_component::toggle_button;
 use ensogl_component::toggle_button::ColorableShape;
 use ensogl_component::toggle_button::ToggleButton;
+use ensogl_component::tooltip;
 use ensogl_hardcoded_theme as theme;
 
 
+// ==============
+// === Export ===
+// ==============
+
+pub mod icon;
+
+
 
 // ==================
 // === Constants  ===
@@ -83,17 +87,17 @@ ensogl::define_endpoints! {
 #[derive(Clone, CloneRef, Debug)]
 struct Icons {
     display_object: display::object::Instance,
-    freeze:         ToggleButton<icon::freeze::Shape>,
-    visibility:     ToggleButton<icon::visibility::Shape>,
-    skip:           ToggleButton<icon::skip::Shape>,
+    freeze:         tooltip::OnHover<ToggleButton<icon::freeze::Shape>>,
+    visibility:     tooltip::OnHover<ToggleButton<icon::visibility::Shape>>,
+    skip:           tooltip::OnHover<ToggleButton<icon::skip::Shape>>,
 }
 
 impl Icons {
-    fn new() -> Self {
+    fn new(app: &Application) -> Self {
         let display_object = display::object::Instance::new();
-        let freeze = ToggleButton::new();
-        let visibility = ToggleButton::new();
-        let skip = ToggleButton::new();
+        let freeze = tooltip::OnHover::new(app, "Freeze".to_owned(), ToggleButton::new());
+        let visibility = tooltip::OnHover::new(app, "Show preview".to_owned(), ToggleButton::new());
+        let skip = tooltip::OnHover::new(app, "Skip".to_owned(), ToggleButton::new());
         display_object.add_child(&visibility);
         if ARGS.groups.feature_preview.options.skip_and_freeze.value {
             display_object.add_child(&freeze);
@@ -136,7 +140,7 @@ impl Model {
         let scene = &app.display.default_scene;
         let display_object = display::object::Instance::new();
         let hover_area = hover_area::View::new();
-        let icons = Icons::new();
+        let icons = Icons::new(app);
         let shapes = compound::events::MouseEvents::default();
         let size = default();
         let styles = StyleWatch::new(&scene.style_sheet);

lib/rust/ensogl/component/Cargo.toml

@@ -21,4 +21,4 @@ ensogl-selector = { path = "selector" }
 ensogl-shadow = { path = "shadow" }
 ensogl-text = { path = "text" }
 ensogl-tooltip = { path = "tooltip" }
-ensogl-toggle-button = { path = "toggle-button" }
+ensogl-toggle-button = { path = "toggle-button", features = ["tooltip"] }

lib/rust/ensogl/component/toggle-button/Cargo.toml

@@ -4,6 +4,10 @@ version = "0.1.0"
 authors = ["Enso Team <[email protected]>"]
 edition = "2021"
 
+[features]
+tooltip = ["ensogl-tooltip"]
+
 [dependencies]
 enso-frp = { path = "../../../frp" }
 ensogl-core = { path = "../../core" }
+ensogl-tooltip = { optional = true, path = "../tooltip" }

lib/rust/ensogl/component/toggle-button/src/lib.rs

@@ -279,3 +279,12 @@ impl<S: Shape> display::Object for ToggleButton<S> {
         self.model.icon.display_object()
     }
 }
+
+#[cfg(feature = "tooltip")]
+impl<S: Shape> ensogl_tooltip::Hover for ToggleButton<S> {
+    type Output = frp::Sampler<bool>;
+
+    fn is_hovered(&self) -> Self::Output {
+        self.is_hovered.clone_ref()
+    }
+}

lib/rust/ensogl/component/tooltip/src/hover.rs

@@ -0,0 +1,60 @@
+use ensogl_core::prelude::*;
+
+use crate::Tooltip;
+
+use ensogl_core::application::tooltip::Style;
+use ensogl_core::application::Application;
+use ensogl_core::display;
+use frp::stream::EventOutput;
+use frp::HasOutput;
+
+
+
+/// Tooltip component that is only visible when hovering over another component.
+#[derive(Clone, CloneRef, Debug, Deref)]
+pub struct OnHover<T: Clone + CloneRef> {
+    tooltip: Tooltip,
+    #[deref]
+    target:  T,
+}
+
+impl<T: Clone + CloneRef + Hover> OnHover<T> {
+    /// Constructor.
+    pub fn new(app: &Application, label: String, target: T) -> Self {
+        let tooltip = Tooltip::new(app);
+        Self { tooltip, target }.init(app, label)
+    }
+
+    fn init(self, app: &Application, label: String) -> Self {
+        app.display.default_scene.add_child(&self.tooltip);
+        let network = &self.tooltip.frp.network;
+        frp::extend! { network
+            let is_hovered = self.target.is_hovered();
+            tooltip <- is_hovered.map(move |is_hovered| {
+                if *is_hovered {
+                    Style::set_label(label.clone())
+                } else {
+                    Style::unset_label()
+                }
+            });
+            app.frp.set_tooltip <+ tooltip;
+        }
+        self
+    }
+}
+
+impl<T: Clone + CloneRef + display::Object> display::Object for OnHover<T> {
+    fn display_object(&self) -> &display::object::Instance {
+        self.target.display_object()
+    }
+}
+
+
+pub trait Hover
+where
+    Self::Output: EventOutput,
+    Self::Output: HasOutput<Output = bool>, {
+    type Output;
+
+    fn is_hovered(&self) -> Self::Output;
+}

lib/rust/ensogl/component/tooltip/src/lib.rs

@@ -24,6 +24,10 @@ use ensogl_label::Label;
 // === Export ===
 // ==============
 
+pub mod hover;
+
+pub use crate::hover::Hover;
+pub use crate::hover::OnHover;
 pub use ensogl::application::tooltip;