diff --git a/ide/CHANGELOG.md b/ide/CHANGELOG.md
index b881b6b2ede1..3ceba992cb2c 100644
--- a/ide/CHANGELOG.md
+++ b/ide/CHANGELOG.md
@@ -20,6 +20,9 @@
   unnecessary library imports when selecting hints from node searcher. This
   makes the generated textual code easier to read and reduces likelihood of
   accidental name collision.
+- [Hovering over an output port shows a pop-up with the result type of a node]
+  [1312]. This allows discovering the result type of a node which can help with
+  debugging and development.
 - [Visualizations can define context for preprocessor evaluation][1291]. Users
   can now decide what module's context should be used for visualization
   preprocessor. This allows providing visualization with standard library
@@ -195,6 +198,7 @@ you can find their release notes
   https://www.youtube.com/watch?v=BYUAL4ksEgY&ab_channel=Enso
 [podcast-future-of-enso]:
   https://www.youtube.com/watch?v=rF8DuJPOfTs&t=1863s&ab_channel=Enso
+[1312]: https://github.com/enso-org/ide/pull/1312
 
 <br/>
 
diff --git a/ide/src/rust/ensogl/lib/components/src/label.rs b/ide/src/rust/ensogl/lib/components/src/label.rs
new file mode 100644
index 000000000000..9bd76e6c9d6f
--- /dev/null
+++ b/ide/src/rust/ensogl/lib/components/src/label.rs
@@ -0,0 +1,198 @@
+//! Label component. Appears as text with background.
+
+use crate::prelude::*;
+
+use enso_frp as frp;
+use enso_frp;
+use ensogl_core::application::Application;
+use ensogl_core::data::color;
+use ensogl_core::display::shape::*;
+use ensogl_core::display::traits::*;
+use ensogl_core::display;
+use ensogl_text as text;
+
+use ensogl_theme::component::label as theme;
+
+
+
+// ==========================
+// === Shapes Definitions ===
+// ==========================
+
+mod background {
+    use super::*;
+
+    ensogl_core::define_shape_system! {
+        (style:Style,bg_color:Vector4) {
+
+            let width   = Var::<Pixels>::from("input_size.x");
+            let height  = Var::<Pixels>::from("input_size.y");
+            let padding = style.get_number_or(theme::padding, 0.0);
+            let width   = width  - padding.px() * 2.0;
+            let height  = height - padding.px() * 2.0;
+            let radius  = &height / 2.0;
+            let shape   = Rect((&width,&height)).corners_radius(&radius);
+            let shape   = shape.fill(Var::<color::Rgba>::from(bg_color.clone()));
+
+
+            // === Shadow ===
+            let alpha         = Var::<f32>::from(format!("({0}.w)",bg_color));
+            let border_size_f = 16.0;
+            let shaow_size    = style.get_number_or(theme::shadow::size,0.0);
+            let shadow_size   = shaow_size.px();
+            let shadow_width  = &width  + &shadow_size * 2.0;
+            let shadow_height = &height + &shadow_size * 2.0;
+            let shadow_radius = &shadow_height / 2.0;
+            let shadow        = Rect((shadow_width,shadow_height)).corners_radius(shadow_radius);
+            let base_color    = color::Rgba::from(style.get_color(theme::shadow));
+            let base_color    = Var::<color::Rgba>::from(base_color);
+            let base_color    = base_color.multiply_alpha(&alpha);
+            let fading_color  = color::Rgba::from(style.get_color(theme::shadow::fading));
+            let fading_color  = Var::<color::Rgba>::from(fading_color);
+            let fading_color  = fading_color.multiply_alpha(&alpha);
+            let exponent      = style.get_number_or(theme::shadow::exponent,2.0);
+            let shadow_color  = color::LinearGradient::new()
+                .add(0.0,fading_color.into_linear())
+                .add(1.0,base_color.into_linear());
+            let shadow_color = color::SdfSampler::new(shadow_color)
+                .max_distance(border_size_f)
+                .slope(color::Slope::Exponent(exponent));
+            let shadow        = shadow.fill(shadow_color);
+
+            (shadow+shape).into()
+        }
+    }
+}
+
+
+
+// ===========
+// === FRP ===
+// ===========
+
+ensogl_core::define_endpoints! {
+    Input {
+        set_content(String),
+        set_opacity(f32)
+    }
+    Output {
+        size (Vector2)
+    }
+}
+
+
+
+// =============
+// === Model ===
+// =============
+
+#[derive(Clone,Debug)]
+struct Model {
+    background     : background::View,
+    label          : text::Area,
+    display_object : display::object::Instance,
+    app            : Application,
+    style          : StyleWatch,
+}
+
+impl Model {
+    fn new(app: Application) -> Self {
+        let app            = app.clone_ref();
+        let scene          = app.display.scene();
+        let logger         = Logger::new("TextLabel");
+        let display_object = display::object::Instance::new(&logger);
+        let label          = app.new_view::<text::Area>();
+        let background     = background::View::new(&logger);
+
+        // FIXME[MM/WD]: Depth sorting of labels to in front of everything else in the scene.
+        //  Temporary solution. The depth management needs to allow defining relative position of
+        //  the text and background and let the whole component to be set to am an arbitrary layer.
+        label.remove_from_scene_layer_DEPRECATED(&scene.layers.main);
+        label.add_to_scene_layer_DEPRECATED(&scene.layers.tooltip_text);
+        scene.layers.tooltip_background.add_exclusive(&background);
+
+        display_object.add_child(&background);
+        display_object.add_child(&label);
+
+        let style = StyleWatch::new(&app.display.scene().style_sheet);
+
+        Model { label, display_object, background, app, style }
+    }
+
+    pub fn height(&self) -> f32 {
+        self.style.get_number_or(theme::height, 0.0)
+    }
+
+    fn set_width(&self, width:f32) -> Vector2 {
+        let padding     = self.style.get_number_or(theme::padding,0.0);
+        let text_size   = self.style.get_number_or(theme::text::size,0.0);
+        let text_offset = self.style.get_number_or(theme::text::offset,0.0);
+        let height      = self.height();
+        let size        = Vector2(width * 1.25,height);
+        let padded_size = size + Vector2(padding,padding) * 2.0;
+        self.background.size.set(padded_size);
+        let text_origin = Vector2(padding / 2.0 + text_offset - size.x/2.0, text_size /2.0);
+        self.label.set_position_xy(text_origin);
+        padded_size
+    }
+
+    fn set_content(&self, t:&str) -> Vector2 {
+        self.label.set_content(t);
+        self.set_width(self.label.width.value())
+    }
+
+    fn set_opacity(&self, value:f32) {
+        let text_color_path = theme::text;
+        let text_color      = self.style.get_color(text_color_path).multiply_alpha(value);
+        let text_color      = color::Rgba::from(text_color);
+        self.label.frp.set_color_all.emit(text_color);
+        self.label.frp.set_default_color.emit(text_color);
+
+        let bg_color_path = theme::background;
+        let bg_color      = self.style.get_color(bg_color_path).multiply_alpha(value);
+        let bg_color      = color::Rgba::from(bg_color);
+        self.background.bg_color.set(bg_color.into())
+    }
+}
+
+
+
+// =======================
+// === Label Component ===
+// =======================
+
+#[allow(missing_docs)]
+#[derive(Clone,CloneRef,Debug)]
+pub struct Label {
+    model   : Rc<Model>,
+    pub frp : Rc<Frp>,
+}
+
+impl Label {
+    /// Constructor.
+    pub fn new(app:Application) -> Self {
+        let frp   = Rc::new(Frp::new());
+        let model = Rc::new(Model::new(app.clone_ref()));
+        Label {frp,model}.init()
+    }
+
+    fn init(self) -> Self {
+        let frp     = &self.frp;
+        let network = &frp.network;
+        let model   = &self.model;
+
+        frp::extend! { network
+            frp.source.size <+ frp.set_content.map(f!((t)
+                model.set_content(t)
+            ));
+
+            eval frp.set_opacity((value) model.set_opacity(*value));
+        }
+
+        self
+    }
+}
+
+impl display::Object for Label {
+    fn display_object(&self) -> &display::object::Instance { &self.model.display_object }
+}
diff --git a/ide/src/rust/ensogl/lib/components/src/lib.rs b/ide/src/rust/ensogl/lib/components/src/lib.rs
index ddca4ec4d427..884be691141d 100644
--- a/ide/src/rust/ensogl/lib/components/src/lib.rs
+++ b/ide/src/rust/ensogl/lib/components/src/lib.rs
@@ -18,6 +18,7 @@
 
 pub mod drop_down_menu;
 pub mod list_view;
+pub mod label;
 pub mod toggle_button;
 
 /// Commonly used types and functions.
diff --git a/ide/src/rust/ensogl/lib/core/src/animation/frp/animation.rs b/ide/src/rust/ensogl/lib/core/src/animation/frp/animation.rs
index c6afec23931d..34177f5d95cd 100644
--- a/ide/src/rust/ensogl/lib/core/src/animation/frp/animation.rs
+++ b/ide/src/rust/ensogl/lib/core/src/animation/frp/animation.rs
@@ -1,5 +1,7 @@
 //! FRP bindings to the animation engine.
 
+pub mod hysteretic;
+
 use crate::prelude::*;
 
 use crate::animation::physics::inertia;
diff --git a/ide/src/rust/ensogl/lib/core/src/animation/frp/animation/hysteretic.rs b/ide/src/rust/ensogl/lib/core/src/animation/frp/animation/hysteretic.rs
new file mode 100644
index 000000000000..cc88180e28af
--- /dev/null
+++ b/ide/src/rust/ensogl/lib/core/src/animation/frp/animation/hysteretic.rs
@@ -0,0 +1,113 @@
+//! Animation that has a delayed onset and offset.
+//!
+//! The basic idea behind this animation is, that it changes between two states: of (0.0) and on
+//! (1.0), but only after a delay (`st`/`et` start delay, end delay). If the animation gets
+//! canceled before the delay has passed, nothing happens, and the delay resets.
+//!
+//! This can be used to hide state changes that are only happening for a short duration. For example
+//! consider a UI element that is shown when hovering ofer an icon. When only moving the mouse
+//! cursor past the icon we want to avoid the pop-up appearing and disappearing right away. The
+//! `HystereticAnimation` allows this by setting a `start_delay_duration` long enough to avoid
+//! triggering during the time it takes to move past the icon. Thus, when the cursor moves past the
+//! icon nothing is visible to the user, but if the mosque cursor stays on the icon longer than
+//! `start_delay_duration`, the animation starts, and the pop-up becomes visible. In reverse, when
+//! moving the cursor between multiple icons, the pop-up should not permanently start and disappear
+//! and re-appear. Thus setting a `end_delay_duration` will avoid the pop-up from disappearing, if
+//! the time the cursor is between icons is less than the `end_delay_duration`. Instead, the hiding
+//! will only start iof the cursos has left any icon triggering the pop-up for longer than the
+//! `end_delay_duration`.
+//!
+use crate::prelude::*;
+
+use crate::Animation;
+use crate::Easing;
+
+use enso_frp as frp;
+
+
+
+// ===========
+// === Frp ===
+// ===========
+
+crate::define_endpoints! {
+    Input {
+        /// Trigger start of animation towards start state (0.0). Will be delayed by onset time.
+        to_start(),
+        /// Trigger start of animation towards end state (1.0). Will be delayed by onset time.
+        to_end(),
+    }
+    Output {
+        /// Represents the numeric state of the animation in the range 0..1.
+        value(f32),
+        /// Triggered when the state reaches 1.0.
+        on_end(),
+        /// Triggered when the state reaches 0.0.
+        on_start(),
+    }
+}
+
+
+
+// ===========================
+// === HystereticAnimation ===
+// ===========================
+
+/// Animation that has a delayed onset and offset.
+#[derive(CloneRef,Debug,Shrinkwrap)]
+pub struct HystereticAnimation {
+    #[allow(missing_docs)]
+    pub frp : FrpEndpoints,
+}
+
+impl HystereticAnimation {
+    #[allow(missing_docs)]
+    pub fn new(network:&frp::Network, start_delay_duration:f32, end_delay_duration:f32) -> Self {
+        let frp         = Frp::extend(network);
+        let start_delay = Easing::new(network);
+        let end_delay   = Easing::new(network);
+        start_delay.set_duration(start_delay_duration);
+        end_delay.set_duration(end_delay_duration);
+
+        let transition   = Animation::<f32>::new(network);
+
+        frp::extend! { network
+
+            during_transition <- any_mut();
+
+            on_end                <- frp.to_end.constant(());
+            on_end_while_active   <- on_end.gate(&during_transition);
+            on_end_while_inactive <- on_end.gate_not(&during_transition);
+
+            on_start                <- frp.to_start.constant(());
+            on_start_while_active   <- on_start.gate(&during_transition);
+            on_start_while_inactive <- on_start.gate_not(&during_transition);
+
+            start_delay.target <+ on_start_while_inactive.constant(1.0);
+            end_delay.target   <+ on_end_while_inactive.constant(1.0);
+
+            start_delay.stop_and_rewind <+ on_end.constant(0.0);
+            end_delay.stop_and_rewind   <+ on_start.constant(0.0);
+
+            offset_start <- end_delay.on_end.map(|t| t.is_normal()).on_true();
+            onset_start  <- start_delay.on_end.map(|t| t.is_normal()).on_true();
+
+            onset_end  <- transition.value.map(|t| (t - 1.0).abs() < std::f32::EPSILON).on_true();
+            offset_end <- transition.value.map(|t| t.abs() < std::f32::EPSILON).on_true();
+
+            transition.target <+ onset_start.constant(1.0);
+            transition.target <+ offset_start.constant(0.0);
+            transition.target <+ on_end_while_active.constant(0.0);
+            transition.target <+ on_start_while_active.constant(1.0);
+
+            during_transition <+ bool(&onset_end,&onset_start);
+            during_transition <+ bool(&offset_end,&offset_start);
+
+            frp.source.value    <+ transition.value;
+            frp.source.on_end   <+ onset_end;
+            frp.source.on_start <+ offset_end;
+        }
+
+        HystereticAnimation{frp}
+    }
+}
diff --git a/ide/src/rust/ensogl/lib/core/src/data/color/data.rs b/ide/src/rust/ensogl/lib/core/src/data/color/data.rs
index 766f78688f6b..adb797703ffe 100644
--- a/ide/src/rust/ensogl/lib/core/src/data/color/data.rs
+++ b/ide/src/rust/ensogl/lib/core/src/data/color/data.rs
@@ -291,3 +291,16 @@ impl<C:Default> Default for Alpha<C> {
         Self {alpha,opaque}
     }
 }
+
+impl<C> Alpha<C> {
+    /// Return the color with a multiplied alpha channel.
+    pub fn multiply_alpha(self, alpha:f32) -> Color<Self> {
+        let alpha = self.alpha * alpha;
+        Color(Alpha{alpha, opaque: self.opaque })
+    }
+
+    /// Modify the color's alpha channel.
+    pub fn mod_alpha<F:FnOnce(&mut f32)>(&mut self, f:F) {
+        f(&mut self.alpha)
+    }
+}
diff --git a/ide/src/rust/ensogl/lib/core/src/data/color/gradient.rs b/ide/src/rust/ensogl/lib/core/src/data/color/gradient.rs
index 28237f0bc1c9..a688e76ec284 100644
--- a/ide/src/rust/ensogl/lib/core/src/data/color/gradient.rs
+++ b/ide/src/rust/ensogl/lib/core/src/data/color/gradient.rs
@@ -56,7 +56,7 @@ impl<Color> LinearGradient<Color> {
 }
 
 impls! { [Color] From<&LinearGradient<Color>> for Glsl
-where [Color:Copy + RefInto<Glsl>] {
+where [Color:RefInto<Glsl>] {
     |t| {
         let args = t.control_points.iter().map(|control_point| {
             let offset = control_point.offset.glsl();
@@ -82,7 +82,7 @@ pub const DEFAULT_DISTANCE_GRADIENT_MAX_DISTANCE : f32 = 10.0;
 /// A gradient which transforms a linear gradient to a gradient along the signed distance field.
 /// The slope parameter modifies how fast the gradient values are changed, allowing for nice,
 /// smooth transitions.
-#[derive(Copy,Clone,Debug)]
+#[derive(Clone,Debug)]
 pub struct SdfSampler<Gradient> {
     /// The distance from the shape border at which the gradient should start.
     pub min_distance : f32,
diff --git a/ide/src/rust/ensogl/lib/core/src/display/scene.rs b/ide/src/rust/ensogl/lib/core/src/display/scene.rs
index 359ad3f9cae1..d91413a9e02b 100644
--- a/ide/src/rust/ensogl/lib/core/src/display/scene.rs
+++ b/ide/src/rust/ensogl/lib/core/src/display/scene.rs
@@ -603,11 +603,15 @@ impl Renderer {
 /// should be abstracted away in the future.
 #[derive(Clone,CloneRef,Debug)]
 pub struct HardcodedLayers {
-    pub viz            : Layer,
-    pub below_main     : Layer,
+    pub viz              : Layer,
+    pub below_main       : Layer,
     // main <- here is the 'main` layer inserted.
-    pub cursor         : Layer,
-    pub label          : Layer,
+    pub cursor           : Layer,
+    pub label            : Layer,
+
+    pub tooltip_background : Layer,
+    pub tooltip_text       : Layer,
+
     pub viz_fullscreen : Layer,
     pub breadcrumbs    : Layer,
     layers             : Layers,
@@ -622,23 +626,30 @@ impl Deref for HardcodedLayers {
 
 impl HardcodedLayers {
     pub fn new(logger:impl AnyLogger) -> Self {
-        let layers         = Layers::new(logger);
-        let viz            = layers.new_layer();
-        let cursor         = layers.new_layer();
-        let label          = layers.new_layer();
-        let viz_fullscreen = layers.new_layer();
-        let below_main     = layers.new_layer();
-        let breadcrumbs    = layers.new_layer();
+        let layers             = Layers::new(logger);
+        let viz                = layers.new_layer();
+        let cursor             = layers.new_layer();
+        let label              = layers.new_layer();
+        let tooltip_background = layers.new_layer();
+        let tooltip_text       = layers.new_layer();
+        let viz_fullscreen     = layers.new_layer();
+        let below_main         = layers.new_layer();
+        let breadcrumbs        = layers.new_layer();
         viz.set_camera(layers.main.camera());
         label.set_camera(layers.main.camera());
+        tooltip_background.set_camera(layers.main.camera());
+        tooltip_text.set_camera(layers.main.camera());
         below_main.set_camera(layers.main.camera());
         layers.add_layers_order_dependency(&viz,&below_main);
         layers.add_layers_order_dependency(&below_main,&layers.main);
         layers.add_layers_order_dependency(&layers.main,&cursor);
         layers.add_layers_order_dependency(&cursor,&label);
-        layers.add_layers_order_dependency(&label,&viz_fullscreen);
+        layers.add_layers_order_dependency(&label,&tooltip_background);
+        layers.add_layers_order_dependency(&tooltip_background,&tooltip_text);
+        layers.add_layers_order_dependency(&tooltip_text,&viz_fullscreen);
         layers.add_layers_order_dependency(&viz_fullscreen,&breadcrumbs);
-        Self {layers,viz,cursor,label,viz_fullscreen,below_main,breadcrumbs}
+        Self {layers,viz,cursor,label,viz_fullscreen,below_main,breadcrumbs,tooltip_background,
+              tooltip_text}
     }
 }
 
diff --git a/ide/src/rust/ensogl/lib/core/src/display/shape/primitive/def/var.rs b/ide/src/rust/ensogl/lib/core/src/display/shape/primitive/def/var.rs
index ac370a517932..237b31f0bff2 100644
--- a/ide/src/rust/ensogl/lib/core/src/display/shape/primitive/def/var.rs
+++ b/ide/src/rust/ensogl/lib/core/src/display/shape/primitive/def/var.rs
@@ -640,3 +640,45 @@ impl From<Var<Vector4<f32>>> for Var<color::Rgba> {
         }
     }
 }
+
+impl Var<color::Rgba> {
+    /// Return the color with the given alpha value.
+    pub fn with_alpha(self, alpha:&Var<f32>) -> Self {
+        match (self, alpha) {
+            (Var::Static  (t), Var::Static(alpha)) => {
+                Var::Static(color::Rgba::new(t.data.red,t.data.green,t.data.blue,*alpha))
+            },
+            (t, alpha) => {
+                let t     = t.glsl();
+                let alpha = alpha.glsl();
+                let var   = format!("srgba({0}.raw.x,{0}.raw.y,{0}.raw.z,{1})",t,alpha);
+                Var::Dynamic(var.into())
+            },
+        }
+    }
+
+    /// Return the color with the alpha value replaced by multiplying the colors' alpha value with
+    /// the given alpha value.
+    pub fn multiply_alpha(self, alpha:&Var<f32>) -> Self {
+        match (self, alpha) {
+            (Var::Static  (t), Var::Static(alpha)) => {
+                let var = color::Rgba::new(t.data.red,t.data.green,t.data.blue,*alpha*t.data.alpha);
+                Var::Static(var)
+            },
+            (t, alpha) => {
+                let t     = t.glsl();
+                let alpha = alpha.glsl();
+                let var   = format!("srgba({0}.raw.x,{0}.raw.y,{0}.raw.z,{0}.raw.w*{1})",t,alpha);
+                Var::Dynamic(var.into())
+            },
+        }
+    }
+
+    /// Transform to LinearRgba.
+    pub fn into_linear(self) -> Var<color::LinearRgba> {
+        match self {
+            Var::Static(c)  => Var::Static(c.into()),
+            Var::Dynamic(c) => Var::Dynamic(format!("rgba({0})",c.glsl()).into())
+        }
+    }
+}
diff --git a/ide/src/rust/ensogl/lib/core/src/gui.rs b/ide/src/rust/ensogl/lib/core/src/gui.rs
index 0e4a32581733..acc35f569da9 100644
--- a/ide/src/rust/ensogl/lib/core/src/gui.rs
+++ b/ide/src/rust/ensogl/lib/core/src/gui.rs
@@ -2,3 +2,4 @@
 
 pub mod component;
 pub mod cursor;
+pub mod style;
diff --git a/ide/src/rust/ensogl/lib/core/src/gui/cursor.rs b/ide/src/rust/ensogl/lib/core/src/gui/cursor.rs
index 76b0deb2a558..05eb5d0cfc2c 100644
--- a/ide/src/rust/ensogl/lib/core/src/gui/cursor.rs
+++ b/ide/src/rust/ensogl/lib/core/src/gui/cursor.rs
@@ -6,10 +6,12 @@ use crate::Animation;
 use crate::DEPRECATED_Animation;
 use crate::DEPRECATED_Tween;
 use crate::data::color;
+use crate::define_style;
 use crate::display::scene::Scene;
 use crate::display::shape::*;
 use crate::display;
 use crate::frp;
+use crate::gui::style::*;
 
 
 
@@ -30,105 +32,10 @@ fn DEFAULT_SIZE() -> Vector2<f32> { Vector2(16.0,16.0) }
 
 
 
-// ==================
-// === StyleValue ===
-// ==================
-
-/// Defines a value of the cursor style.
-#[derive(Debug,Clone,Eq,PartialEq)]
-#[allow(missing_docs)]
-pub struct StyleValue<T> {
-    /// Defines the value of the style. In case it is set to `None`, the default value will be used.
-    /// Please note that setting it to `None` has a different effect than not providing the value
-    /// in the `Style` at all. If the value is provided it can override the existing values when
-    /// used in a semigroup operation.
-    pub value : Option<T>,
-
-    /// Defines if the state transition should be used. Sometimes disabling animation is required.
-    /// A good example is the implementation of a selection box. When drawing selection box with the
-    /// mouse, the user wants to see it in real-time, without it growing over time.
-    pub animate : bool,
-}
-
-impl<T:Default> Default for StyleValue<T> {
-    fn default() -> Self {
-        let value   = default();
-        let animate = true;
-        Self {value,animate}
-    }
-}
-
-impl<T> StyleValue<T> {
-    /// Constructor.
-    pub fn new(value:T) -> Self {
-        let value   = Some(value);
-        let animate = true;
-        Self {value,animate}
-    }
-
-    /// Constructor for a default value setter. Please note that this is not made a `Default` impl
-    /// on purpose. This method creates a non-empty value setter which sets the target to its
-    /// default value. Read `Style` docs to learn more.
-    pub fn new_default() -> Self {
-        let value   = None;
-        let animate = true;
-        Self {value,animate}
-    }
-
-    /// Constructor with disabled animation.
-    pub fn new_no_animation(value:T) -> Self {
-        let value   = Some(value);
-        let animate = false;
-        Self {value,animate}
-    }
-}
-
-
-
 // =============
 // === Style ===
 // =============
 
-macro_rules! define_style {( $( $(#$meta:tt)* $field:ident : $field_type:ty),* $(,)? ) => {
-    /// Set of cursor style parameters. You can construct this object in FRP network, merge it using
-    /// its `Semigroup` instance, and finally pass to the cursor to apply the style. Please note
-    /// that cursor does not implement any complex style management (like pushing or popping a style
-    /// from a style stack) on purpose, as it is stateful, while it is straightforward to implement
-    /// it in FRP.
-    #[derive(Debug,Clone,Default,PartialEq)]
-    pub struct Style {
-        $($(#$meta)? $field : Option<StyleValue<$field_type>>),*
-    }
-
-    impl Style {
-        /// Create a new style with all fields set to default value. Please note that it is
-        /// different than empty style, as this one overrides fields with default values when
-        /// used in a semigroup operation.
-        pub fn new_with_all_fields_default() -> Self {
-            $(let $field = Some(StyleValue::new_default());)*
-            Self {$($field),*}
-        }
-
-        /// Check whether the style is a default, empty one.
-        pub fn is_default(&self) -> bool {
-            $(self.$field.is_none())&&*
-        }
-    }
-
-    impl PartialSemigroup<&Style> for Style {
-        #[allow(clippy::clone_on_copy)]
-        fn concat_mut(&mut self, other:&Self) {
-            $(if self.$field . is_none() { self.$field = other.$field . clone() })*
-        }
-    }
-
-    impl PartialSemigroup<Style> for Style {
-        fn concat_mut(&mut self, other:Self) {
-            self.concat_mut(&other)
-        }
-    }
-};}
-
 define_style! {
     /// Host defines an object which the cursor position is bound to. It is used to implement
     /// label selection. After setting the host to the label, cursor will not follow mouse anymore,
diff --git a/ide/src/rust/ensogl/lib/core/src/gui/style.rs b/ide/src/rust/ensogl/lib/core/src/gui/style.rs
new file mode 100644
index 000000000000..dd6681ab9093
--- /dev/null
+++ b/ide/src/rust/ensogl/lib/core/src/gui/style.rs
@@ -0,0 +1,106 @@
+//! Definition of the Style macro that creates Style, which can be updated partially.
+
+use crate::prelude::*;
+
+
+
+// ==================
+// === StyleValue ===
+// ==================
+
+/// Defines a value of the cursor style.
+#[derive(Debug,Clone,Eq,PartialEq)]
+#[allow(missing_docs)]
+pub struct StyleValue<T> {
+    /// Defines the value of the style. In case it is set to `None`, the default value will be used.
+    /// Please note that setting it to `None` has a different effect than not providing the value
+    /// in the `Style` at all. If the value is provided it can override the existing values when
+    /// used in a semigroup operation.
+    pub value : Option<T>,
+
+    /// Defines if the state transition should be used. Sometimes disabling animation is required.
+    /// A good example is the implementation of a selection box. When drawing selection box with the
+    /// mouse, the user wants to see it in real-time, without it growing over time.
+    pub animate : bool,
+}
+
+impl<T:Default> Default for StyleValue<T> {
+    fn default() -> Self {
+        let value   = default();
+        let animate = true;
+        Self {value,animate}
+    }
+}
+
+impl<T> StyleValue<T> {
+    /// Constructor.
+    pub fn new(value:T) -> Self {
+        let value   = Some(value);
+        let animate = true;
+        Self {value,animate}
+    }
+
+    /// Constructor for a default value setter. Please note that this is not made a `Default` impl
+    /// on purpose. This method creates a non-empty value setter which sets the target to its
+    /// default value. Read `Style` docs to learn more.
+    pub fn new_default() -> Self {
+        let value   = None;
+        let animate = true;
+        Self {value,animate}
+    }
+
+    /// Constructor with disabled animation.
+    pub fn new_no_animation(value:T) -> Self {
+        let value   = Some(value);
+        let animate = false;
+        Self {value,animate}
+    }
+}
+
+
+
+// =============
+// === Style ===
+// =============
+
+#[macro_export]
+/// Create struct called `Style` that can hold updatable style information.
+macro_rules! define_style {( $( $(#$meta:tt)* $field:ident : $field_type:ty),* $(,)? ) => {
+    /// Set of cursor style parameters. You can construct this object in FRP network, merge it using
+    /// its `Semigroup` instance, and finally pass to the cursor to apply the style. Please note
+    /// that cursor does not implement any complex style management (like pushing or popping a style
+    /// from a style stack) on purpose, as it is stateful, while it is straightforward to implement
+    /// it in FRP.
+    #[derive(Debug,Clone,Default,PartialEq)]
+    pub struct Style {
+        $($(#$meta)? $field : Option<StyleValue<$field_type>>),*
+    }
+
+    impl Style {
+        /// Create a new style with all fields set to default value. Please note that it is
+        /// different than empty style, as this one overrides fields with default values when
+        /// used in a semigroup operation.
+        pub fn new_with_all_fields_default() -> Self {
+            $(let $field = Some(StyleValue::new_default());)*
+            Self {$($field),*}
+        }
+
+        /// Check whether the style is a default, empty one.
+        pub fn is_default(&self) -> bool {
+            $(self.$field.is_none())&&*
+        }
+    }
+
+    impl PartialSemigroup<&Style> for Style {
+        #[allow(clippy::clone_on_copy)]
+        fn concat_mut(&mut self, other:&Self) {
+            $(if self.$field . is_none() { self.$field = other.$field . clone() })*
+        }
+    }
+
+    impl PartialSemigroup<Style> for Style {
+        fn concat_mut(&mut self, other:Self) {
+            self.concat_mut(&other)
+        }
+    }
+};}
diff --git a/ide/src/rust/ensogl/lib/text/src/component/area.rs b/ide/src/rust/ensogl/lib/text/src/component/area.rs
index af5391a0e759..9a454e04659d 100644
--- a/ide/src/rust/ensogl/lib/text/src/component/area.rs
+++ b/ide/src/rust/ensogl/lib/text/src/component/area.rs
@@ -446,8 +446,8 @@ pub const LINE_HEIGHT : f32 = 14.0;
 #[derive(Clone,CloneRef,Debug)]
 #[allow(missing_docs)]
 pub struct Area {
-    data    : AreaModel,
-    pub frp : Frp,
+    data    : Rc<AreaModel>,
+    pub frp : Rc<Frp>,
 }
 
 impl Deref for Area {
@@ -460,8 +460,8 @@ impl Deref for Area {
 impl Area {
     /// Constructor.
     pub fn new(app:&Application) -> Self {
-        let frp  = Frp::new();
-        let data = AreaModel::new(app,&frp.output);
+        let frp  = Rc::new(Frp::new());
+        let data = Rc::new(AreaModel::new(app,&frp.output));
         Self {data,frp} . init()
     }
 
diff --git a/ide/src/rust/ensogl/lib/theme/src/lib.rs b/ide/src/rust/ensogl/lib/theme/src/lib.rs
index bce76dc4cd65..4b30706af396 100644
--- a/ide/src/rust/ensogl/lib/theme/src/lib.rs
+++ b/ide/src/rust/ensogl/lib/theme/src/lib.rs
@@ -156,6 +156,10 @@ impl Default for Theme {
 define_themes! { [light:0, dark:1]
     application {
         background = Lcha(0.96,0.014,0.18,1.0) , Lcha(0.13,0.014,0.18,1.0);
+        tooltip {
+            hide_delay_duration_ms = 150.0, 150.0;
+            show_delay_duration_ms = 150.0, 150.0;
+        }
     }
     code {
         syntax {
@@ -272,4 +276,22 @@ define_themes! { [light:0, dark:1]
             chroma_factor    = 0.2 , 0.2;
         }
     }
+    component {
+        label {
+            background = Lcha(0.98,0.014,0.18,1.0) , Lcha(0.2,0.014,0.18,1.0);
+            shadow     = Lcha(0.0,0.0,0.0,0.20) , Lcha(0.0,0.0,0.0,0.20);
+            shadow {
+                fading   = Lcha(0.0,0.0,0.0,0.0) , Lcha(0.0,0.0,0.0,0.0);
+                exponent = 2.0 , 2.0;
+                size     = 10.0, 10.0;
+            }
+            text         = Lcha(0.0,0.0,0.0,0.7) , Lcha(1.0,0.0,0.0,0.7);
+            text {
+                offset = 10.0, 10.0;
+                size   = 12.0, 12.0;
+            }
+            padding = 15.0, 15.0;
+            height  = 36.0, 36.0;
+        }
+    }
 }
diff --git a/ide/src/rust/ide/view/graph-editor/src/component.rs b/ide/src/rust/ide/view/graph-editor/src/component.rs
index 2c2dd43290b5..991bfd8e23ed 100644
--- a/ide/src/rust/ide/view/graph-editor/src/component.rs
+++ b/ide/src/rust/ide/view/graph-editor/src/component.rs
@@ -1,9 +1,10 @@
 //! Root module for graph component definitions.
 
 pub mod breadcrumbs;
-pub mod type_coloring;
 pub mod edge;
 pub mod node;
+pub mod tooltip;
+pub mod type_coloring;
 pub mod visualization;
 
 pub use breadcrumbs::Breadcrumbs;
diff --git a/ide/src/rust/ide/view/graph-editor/src/component/node.rs b/ide/src/rust/ide/view/graph-editor/src/component/node.rs
index d0e2acd2fa5e..7e817585d4d0 100644
--- a/ide/src/rust/ide/view/graph-editor/src/component/node.rs
+++ b/ide/src/rust/ide/view/graph-editor/src/component/node.rs
@@ -18,9 +18,10 @@ pub use expression::Expression;
 
 use crate::prelude::*;
 
+use crate::Type;
 use crate::builtin::visualization::native as builtin_visualization;
 use crate::component::visualization;
-use crate::Type;
+use crate::tooltip;
 
 use enso_frp as frp;
 use enso_frp;
@@ -264,6 +265,7 @@ ensogl::define_endpoints! {
         hover                 (bool),
         error                 (Option<Error>),
         visualization_enabled (bool),
+        tooltip               (tooltip::Style),
     }
 }
 
@@ -610,9 +612,11 @@ impl Node {
                 model.main_area.bg_color.set(color::Rgba::from(c).into())
             );
 
+            frp.source.tooltip <+ model.output.frp.tooltip;
 
             // === VCS Handling ===
             model.vcs_indicator.frp.set_status <+ frp.set_vcs_status;
+
         }
 
         frp.set_error.emit(None);
diff --git a/ide/src/rust/ide/view/graph-editor/src/component/node/output/area.rs b/ide/src/rust/ide/view/graph-editor/src/component/node/output/area.rs
index 1a83ddfee451..9d4fe93dcbc8 100644
--- a/ide/src/rust/ide/view/graph-editor/src/component/node/output/area.rs
+++ b/ide/src/rust/ide/view/graph-editor/src/component/node/output/area.rs
@@ -5,8 +5,7 @@ use ensogl::display::traits::*;
 
 use enso_frp as frp;
 use enso_frp;
-use ensogl::Animation;
-use ensogl::Easing;
+use ensogl::animation::hysteretic::HystereticAnimation;
 use ensogl::application::Application;
 use ensogl::data::color;
 use ensogl::display::shape::StyleWatch;
@@ -16,9 +15,10 @@ use ensogl_theme as theme;
 use span_tree;
 
 use crate::Type;
-use crate::component::node;
-use crate::component::node::output::port;
 use crate::component::node::input;
+use crate::component::node::output::port;
+use crate::component::node;
+use crate::tooltip;
 
 
 
@@ -134,6 +134,7 @@ ensogl::define_endpoints! {
         on_port_type_change  (Crumbs,Option<Type>),
         port_size_multiplier (f32),
         body_hover           (bool),
+        tooltip              (tooltip::Style),
     }
 }
 
@@ -304,6 +305,7 @@ impl Model {
                     self.frp.source.on_port_press <+ port_frp.on_press.constant(crumbs.clone());
                     port_frp.set_size_multiplier <+ self.frp.port_size_multiplier;
                     self.frp.source.on_port_type_change <+ port_frp.tp.map(move |t|(crumbs.clone(),t.clone()));
+                    self.frp.source.tooltip <+ port_frp.tooltip;
                 }
 
                 self.ports.add_child(&port_shape);
@@ -381,48 +383,22 @@ impl Area {
         let frp         = Frp::new();
         let model       = Rc::new(Model::new(logger,app,&frp));
         let network     = &frp.network;
-        let port_size   = Animation::<f32>::new(network);
         let label_color = color::Animation::new(network);
-        let show_delay  = Easing::new(network);
-        let hide_delay  = Easing::new(network);
-        show_delay.set_duration(SHOW_DELAY_DURATION_MS);
-        hide_delay.set_duration(HIDE_DELAY_DURATION_MS);
+
+        let hysteretic_transition = HystereticAnimation::new(
+            &network,SHOW_DELAY_DURATION_MS,HIDE_DELAY_DURATION_MS);
 
         frp::extend! { network
 
             // === Ports Show / Hide ===
 
-            during_transition <- any_mut();
-
-            on_hover_out                 <- frp.on_port_hover.map(|t| t.is_off()).on_true();
-            on_hover_out_during_show     <- on_hover_out.gate(&during_transition);
-            on_hover_out_not_during_show <- on_hover_out.gate_not(&during_transition);
-
-            on_hover_in                  <- frp.on_port_hover.map(|t| t.is_on()).on_true();
-            on_hover_in_during_show      <- on_hover_in.gate(&during_transition);
-            on_hover_in_not_during_show  <- on_hover_in.gate_not(&during_transition);
-
-            show_delay.target <+ on_hover_in_not_during_show.constant(1.0);
-            hide_delay.target <+ on_hover_out_not_during_show.constant(1.0);
-
-            show_delay.stop_and_rewind <+ on_hover_out.constant(0.0);
-            hide_delay.stop_and_rewind <+ on_hover_in.constant(0.0);
-
-            on_hide_start <- hide_delay.on_end.map(|t| t.is_normal()).on_true();
-            on_show_start <- show_delay.on_end.map(|t| t.is_normal()).on_true();
-
-            on_show_end <- port_size.value.map(|t| (t - 1.0).abs() < std::f32::EPSILON).on_true();
-            on_hide_end <- port_size.value.map(|t| t.abs() < std::f32::EPSILON).on_true();
-
-            port_size.target <+ on_show_start.constant(1.0);
-            port_size.target <+ on_hide_start.constant(0.0);
-            port_size.target <+ on_hover_out_during_show.constant(0.0);
-            port_size.target <+ on_hover_in_during_show.constant(1.0);
+            on_hover_out <- frp.on_port_hover.map(|t| t.is_off()).on_true();
+            on_hover_in  <- frp.on_port_hover.map(|t| t.is_on()).on_true();
 
-            during_transition <+ bool(&on_show_end,&on_show_start);
-            during_transition <+ bool(&on_hide_end,&on_hide_start);
+            hysteretic_transition.to_start <+ on_hover_in;
+            hysteretic_transition.to_end   <+ on_hover_out;
 
-            frp.source.port_size_multiplier <+ port_size.value;
+            frp.source.port_size_multiplier <+ hysteretic_transition.value;
             eval frp.set_size ((t) model.set_size(*t));
 
 
diff --git a/ide/src/rust/ide/view/graph-editor/src/component/node/output/port.rs b/ide/src/rust/ide/view/graph-editor/src/component/node/output/port.rs
index 7adb36a11fe0..215930f59ad1 100644
--- a/ide/src/rust/ide/view/graph-editor/src/component/node/output/port.rs
+++ b/ide/src/rust/ide/view/graph-editor/src/component/node/output/port.rs
@@ -1,6 +1,7 @@
 
 use crate::prelude::*;
 
+use crate::tooltip;
 use crate::Type;
 use crate::component::node;
 use crate::component::type_coloring;
@@ -370,6 +371,7 @@ ensogl::define_endpoints! {
         tp       (Option<Type>),
         on_hover (bool),
         on_press (),
+        tooltip  (tooltip::Style),
     }
 }
 
@@ -443,6 +445,13 @@ impl Model {
             color_tgt <- frp.tp.map(f!([styles](t) type_coloring::compute_for_selection(t.as_ref(),&styles)));
             color.target <+ color_tgt;
             eval color.value ((t) shape.set_color(t.into()));
+
+            on_hover  <- frp.on_hover.on_true();
+            non_hover <- frp.on_hover.on_false();
+            frp.source.tooltip <+ frp.tp.sample(&on_hover).unwrap().map(|tp| {
+                tooltip::Style::set_label(tp.to_string())
+            });
+            frp.source.tooltip <+ non_hover.constant(tooltip::Style::unset_label());
         }
 
         opacity.target.emit(PORT_OPACITY_NOT_HOVERED);
diff --git a/ide/src/rust/ide/view/graph-editor/src/component/tooltip.rs b/ide/src/rust/ide/view/graph-editor/src/component/tooltip.rs
new file mode 100644
index 000000000000..094c98a18521
--- /dev/null
+++ b/ide/src/rust/ide/view/graph-editor/src/component/tooltip.rs
@@ -0,0 +1,221 @@
+//! The `Tooltip` shows extra information for UI components. It is pegged to the cursor location
+//! and appears when it receives information to show.
+
+use enso_frp as frp;
+use ensogl::application::Application;
+use ensogl::display;
+use ensogl::prelude::*;
+use ensogl::gui::style::*;
+use ensogl::define_style;
+
+use ensogl_gui_components::label::Label;
+use ensogl::animation::hysteretic::HystereticAnimation;
+use ensogl::display::shape::StyleWatch;
+
+
+
+// =============
+// === Style ===
+// =============
+
+define_style! {
+    /// Host defines an object which the cursor position is bound to. It is used to implement
+    /// label selection. After setting the host to the label, cursor will not follow mouse anymore,
+    /// it will inherit its position from the label instead.
+    text : Option<String>,
+}
+
+impl Style {
+    /// Create a `TooltipUpdate` that sets the label of the tooltip.
+    pub fn set_label(text:String) -> Self {
+        let text = Some(StyleValue::new(Some(text)));
+        Self{text}
+    }
+    /// Create a `TooltipUpdate` that unsets the label of the tooltip.
+    pub fn unset_label() -> Self {
+        let text = Some(StyleValue::new(None));
+        Self{text}
+    }
+
+    fn has_text(&self) -> bool {
+        if let Some(style_value) = self.text.as_ref() {
+            if let Some(inner) = style_value.value.as_ref() {
+                return inner.is_some()
+            }
+        }
+        false
+    }
+}
+
+
+
+// ==============
+// === Offset ===
+// ==============
+
+#[derive(Clone,Copy,Debug)]
+#[allow(missing_docs)]
+/// Indicates the placement of the tooltip relative to the base position location.
+pub enum Placement {
+    Top, Bottom, Left, Right
+}
+
+impl Default for Placement {
+    fn default() -> Self {
+        Placement::Top
+    }
+}
+
+ensogl::define_endpoints! {
+    Input {
+        set_style     (Style),
+        set_location  (Vector2),
+        set_placement (Placement),
+        set_offset    (Vector2),
+    }
+}
+
+
+
+// =============
+// === Model ===
+// =============
+
+#[derive(Clone,Debug)]
+struct Model {
+    tooltip : Label,
+    root    : display::object::Instance,
+}
+
+impl Model {
+    fn new(app:&Application) -> Self {
+        let logger  = Logger::new("TooltipModel");
+        let tooltip = Label::new(app.clone_ref());
+        let root    = display::object::Instance::new(&logger);
+        root.add_child(&tooltip);
+
+        Self{tooltip,root}
+    }
+
+    fn set_location(&self, position:Vector2, size:Vector2, layout: Placement) {
+        let layout_offset = match layout {
+            Placement::Top    => Vector2::new(0.0, size.y * 0.5),
+            Placement::Bottom => Vector2::new(0.0, -size.y * 0.5),
+            Placement::Left   => Vector2::new(-size.x / 2.0, 0.0),
+            Placement::Right  => Vector2::new(size.x / 2.0, 0.0),
+        };
+
+        let base_positions = position.xy();
+        self.tooltip.set_position_xy(base_positions + layout_offset)
+    }
+
+    fn set_style(&self, update:&Style) {
+        if let Some(style) = update.text.as_ref() {
+            let text = style.value.clone().flatten();
+            if let Some(text) = text {
+                self.tooltip.frp.set_content(text)
+            }
+        }
+    }
+
+    fn set_visibility(&self, visible:bool) {
+        if visible {
+            self.root.add_child(&self.tooltip)
+        } else {
+            self.tooltip.unset_parent()
+        }
+    }
+
+    fn set_opacity(&self, value:f32) {
+        self.tooltip.frp.set_opacity(value);
+    }
+}
+
+
+
+// ===============
+// === Tooltip ===
+// ===============
+
+/// Tooltip component that can show extra information about other UI components.
+#[derive(Clone,CloneRef,Debug)]
+pub struct Tooltip {
+    model   : Rc<Model>,
+    #[allow(missing_docs)]
+    pub frp : Rc<Frp>
+}
+
+impl Tooltip {
+    #[allow(missing_docs)]
+    pub fn new(app: &Application) -> Self {
+        let model = Rc::new(Model::new(app));
+        let frp   = Rc::new(Frp::new());
+        Self{model,frp}.init(app)
+    }
+
+    fn init(self,app: &Application) -> Self {
+        let frp     = &self.frp;
+        let network = &frp.network;
+        let model   = &self.model;
+
+        // FIXME : StyleWatch is unsuitable here, as it was designed as an internal tool for shape
+        // system (#795)
+        let styles                 = StyleWatch::new(&app.display.scene().style_sheet);
+        let hide_delay_duration_ms = styles.get_number_or(
+            ensogl_theme::application::tooltip::hide_delay_duration_ms,0.0);
+        let show_delay_duration_ms = styles.get_number_or(
+            ensogl_theme::application::tooltip::show_delay_duration_ms,0.0);
+
+        let hysteretic_transition = HystereticAnimation::new(
+            &network,hide_delay_duration_ms,show_delay_duration_ms);
+
+        frp::extend! { network
+
+
+            // === Style ===
+
+             eval frp.set_style ((t) model.set_style(t));
+             show_text         <- frp.set_style.map(|c| c.has_text());
+             on_has_content    <- show_text.on_true();
+             on_has_no_content <- show_text.on_false();
+
+
+            // === Location ===
+
+             location_update <- all(frp.set_location,
+                                    model.tooltip.frp.size,
+                                    frp.set_offset,
+                                    frp.set_placement);
+             eval location_update ([model]((pos,size,offset,placement)) {
+                let base_position = pos+offset;
+                model.set_location(base_position,*size,*placement)
+             });
+
+
+            // === Transition ===
+
+             hysteretic_transition.to_start <+ on_has_content;
+             hysteretic_transition.to_end   <+ on_has_no_content;
+
+             eval hysteretic_transition.value ([model](value) {
+                model.set_opacity(*value);
+                if *value >= 0.0 {
+                    model.set_visibility(true)
+                } else if *value <= 0.0 {
+                    model.set_visibility(false)
+                }
+             });
+        }
+
+        // Reset appearance to avoid artifacts when first shown.
+        model.set_opacity(0.0);
+        model.set_style(&Style::default());
+        self
+    }
+}
+
+impl display::Object for Tooltip {
+    fn display_object(&self) -> &display::object::Instance {
+        &self.model.root.display_object()
+    }
+}
diff --git a/ide/src/rust/ide/view/graph-editor/src/lib.rs b/ide/src/rust/ide/view/graph-editor/src/lib.rs
index 66af9b99ba61..87d25e0766b9 100644
--- a/ide/src/rust/ide/view/graph-editor/src/lib.rs
+++ b/ide/src/rust/ide/view/graph-editor/src/lib.rs
@@ -35,10 +35,13 @@ pub mod builtin;
 pub mod data;
 
 use crate::component::node;
-use crate::component::visualization;
+use crate::component::tooltip::Placement;
+use crate::component::tooltip::Tooltip;
 use crate::component::visualization::instance::PreprocessorConfiguration;
-use crate::component::visualization::MockDataGenerator3D;
+use crate::component::tooltip;
 use crate::component::type_coloring;
+use crate::component::visualization::MockDataGenerator3D;
+use crate::component::visualization;
 
 use enso_args::ARGS;
 use enso_frp as frp;
@@ -1008,10 +1011,11 @@ impl GraphEditorModelWithNetwork {
     #[allow(clippy::too_many_arguments)]
     fn new_node
     ( &self
-    , pointer_style : &frp::Source<cursor::Style>
-    , output_press  : &frp::Source<EdgeEndpoint>
-    , input_press   : &frp::Source<EdgeEndpoint>
-    , output        : &FrpEndpoints
+    , pointer_style  : &frp::Source<cursor::Style>
+    , tooltip_update : &frp::Source<tooltip::Style>
+    , output_press   : &frp::Source<EdgeEndpoint>
+    , input_press    : &frp::Source<EdgeEndpoint>
+    , output         : &FrpEndpoints
     ) -> NodeId {
         let view    = component::Node::new(&self.app,self.vis_registry.clone_ref());
         let node    = Node::new(view);
@@ -1029,6 +1033,7 @@ impl GraphEditorModelWithNetwork {
 
             node.set_output_expression_visibility <+ self.frp.nodes_labels_visible;
 
+            eval node.frp.tooltip ((tooltip) tooltip_update.emit(tooltip));
             eval node.model.input.frp.pointer_style ((style) pointer_style.emit(style));
             eval node.model.output.frp.on_port_press ([output_press](crumbs){
                 let target = EdgeEndpoint::new(node_id,crumbs.clone());
@@ -1209,11 +1214,14 @@ pub struct GraphEditorModel {
     pub nodes          : Nodes,
     pub edges          : Edges,
     pub vis_registry   : visualization::Registry,
+    // FIXME[MM]: The tooltip should live next to the cursor in `Application`. This does not
+    //  currently work, however, because the `Application` lives in enso-core, and the tooltip
+    //  requires enso-text, which in turn depends on enso-core, creating a cyclic dependency.
+    tooltip            : Tooltip,
     touch_state        : TouchState,
     visualisations     : Visualisations,
     frp                : FrpEndpoints,
     navigator          : Navigator,
-
 }
 
 
@@ -1238,9 +1246,11 @@ impl GraphEditorModel {
         let app            = app.clone_ref();
         let frp            = frp.output.clone_ref();
         let navigator      = Navigator::new(&scene,&scene.camera());
+        let tooltip        = Tooltip::new(&app);
+
         Self {
             logger,display_object,app,cursor,nodes,edges,touch_state,frp,breadcrumbs,
-            vis_registry,visualisations,navigator
+            vis_registry,visualisations,navigator,tooltip,
         }.init()
     }
 
@@ -1252,6 +1262,9 @@ impl GraphEditorModel {
                            else                        { MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET };
         self.breadcrumbs.set_position_x(x_offset);
         self.breadcrumbs.set_position_y(-5.0);
+
+        self.tooltip.frp.set_placement(Placement::Bottom);
+        self.scene().add_child(&self.tooltip);
         self
     }
 
@@ -2235,6 +2248,7 @@ fn new_graph_editor(app:&Application) -> GraphEditor {
     frp::extend! { network
 
     node_pointer_style <- source::<cursor::Style>();
+    node_tooltip       <- source::<tooltip::Style>();
 
     let node_input_touch  = TouchNetwork::<EdgeEndpoint>::new(&network,&mouse);
     let node_output_touch = TouchNetwork::<EdgeEndpoint>::new(&network,&mouse);
@@ -2360,8 +2374,10 @@ fn new_graph_editor(app:&Application) -> GraphEditor {
 
     let add_node_at_cursor = inputs.add_node_at_cursor.clone_ref();
     add_node <- any (inputs.add_node,add_node_at_cursor);
-    new_node <- add_node.map(f_!([model,node_pointer_style,out] {
-        model.new_node(&node_pointer_style,&node_output_touch.down,&node_input_touch.down,&out)
+    new_node <- add_node.map(f_!([model,node_pointer_style,node_tooltip,out] {
+        model.new_node(&node_pointer_style,
+        &node_tooltip,
+        &node_output_touch.down,&node_input_touch.down,&out)
     }));
     out.source.node_added <+ new_node;
 
@@ -2961,7 +2977,15 @@ fn new_graph_editor(app:&Application) -> GraphEditor {
     }
 
 
-    // let frp = Frp::deprecated_new(network.clone(),out); // fixme clone
+
+    // ===============
+    // === Tooltip ===
+    // ===============
+
+    frp::extend! { network
+        eval cursor.frp.scene_position ((pos)  model.tooltip.frp.set_location(pos.xy()) );
+        eval node_tooltip ((tooltip_update) model.tooltip.frp.set_style(tooltip_update) );
+    }
 
     GraphEditor {model,frp}
 }