diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9766a5428..d9751dccf7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,8 @@
   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].
 
 #### EnsoGL (rendering engine)
 
@@ -165,6 +167,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/src/rust/ensogl/lib/components/src/lib.rs b/src/rust/ensogl/lib/components/src/lib.rs
index ddca4ec4d4..4c572d82e2 100644
--- a/src/rust/ensogl/lib/components/src/lib.rs
+++ b/src/rust/ensogl/lib/components/src/lib.rs
@@ -18,6 +18,7 @@
 
 pub mod drop_down_menu;
 pub mod list_view;
+pub mod text_label;
 pub mod toggle_button;
 
 /// Commonly used types and functions.
diff --git a/src/rust/ensogl/lib/components/src/text_label.rs b/src/rust/ensogl/lib/components/src/text_label.rs
new file mode 100644
index 0000000000..57b508e15f
--- /dev/null
+++ b/src/rust/ensogl/lib/components/src/text_label.rs
@@ -0,0 +1,198 @@
+//! Text 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;
+
+
+// ==========================
+// === Shapes Definitions ===
+// ==========================
+
+
+// === Constants ===
+
+const TEXT_OFFSET : f32 = 10.0;
+const TEXT_SIZE   : f32 = 12.0;
+const HEIGHT      : f32 = TEXT_SIZE * 3.0;
+const PADDING     : f32 = 15.0;
+const SHADOW_SIZE : f32 = 10.0;
+
+
+// === Background ===
+
+mod background {
+    use super::*;
+
+    ensogl_core::define_shape_system! {
+        (style:Style,bg_color:Vector4) {
+            use ensogl_theme::graph_editor::node as node_theme;
+
+            let width  = Var::<Pixels>::from("input_size.x");
+            let height = Var::<Pixels>::from("input_size.y");
+            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 shadow_size   = SHADOW_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(node_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(node_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(node_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
+}
+
+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);
+        display_object.add_child(&background);
+        display_object.add_child(&label);
+
+        // Depth sorting of labels to in front of the background.
+        label.remove_from_scene_layer_DEPRECATED(&scene.layers.main);
+        label.add_to_scene_layer_DEPRECATED(&scene.layers.label);
+
+        Model { label, display_object, background, app }
+    }
+
+    pub fn height(&self) -> f32 {
+        HEIGHT
+    }
+
+    fn set_width(&self, width:f32) -> Vector2 {
+        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 style           = StyleWatch::new(&self.app.display.scene().style_sheet);
+        let text_color_path = ensogl_theme::graph_editor::node::text;
+        let text_color      = style.get_color_dim(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 = ensogl_theme::graph_editor::node::background;
+        let bg_color      = style.get_color_dim(bg_color_path).multiply_alpha(value);
+        let bg_color      = color::Rgba::from(bg_color);
+        self.background.bg_color.set(bg_color.into())
+    }
+}
+
+
+
+// ============================
+// === Text Label Component ===
+// ============================
+
+#[allow(missing_docs)]
+#[derive(Clone,CloneRef,Debug)]
+pub struct TextLabel {
+    model   : Rc<Model>,
+    pub frp : Rc<Frp>,
+}
+
+
+impl TextLabel {
+    /// Constructor.
+    pub fn new(app:Application) -> Self {
+        let frp   = Rc::new(Frp::new());
+        let model = Rc::new(Model::new(app.clone_ref()));
+        TextLabel {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 TextLabel {
+    fn display_object(&self) -> &display::object::Instance { &self.model.display_object }
+}
diff --git a/src/rust/ensogl/lib/core/src/animation/frp/animation.rs b/src/rust/ensogl/lib/core/src/animation/frp/animation.rs
index c6afec2393..34177f5d95 100644
--- a/src/rust/ensogl/lib/core/src/animation/frp/animation.rs
+++ b/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/src/rust/ensogl/lib/core/src/animation/frp/animation/hysteretic.rs b/src/rust/ensogl/lib/core/src/animation/frp/animation/hysteretic.rs
new file mode 100644
index 0000000000..5a9298f600
--- /dev/null
+++ b/src/rust/ensogl/lib/core/src/animation/frp/animation/hysteretic.rs
@@ -0,0 +1,116 @@
+//! Animation that has a delayed onset.\
+
+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.
+///
+/// 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`.
+///
+#[derive(CloneRef,Debug,Shrinkwrap)]
+pub struct HystereticAnimation {
+    /// Public FRP Api.
+    pub frp : FrpEndpoints,
+}
+
+impl HystereticAnimation {
+    /// Constructor.
+    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/src/rust/ensogl/lib/core/src/data/color/data.rs b/src/rust/ensogl/lib/core/src/data/color/data.rs
index 766f78688f..3fd20c967e 100644
--- a/src/rust/ensogl/lib/core/src/data/color/data.rs
+++ b/src/rust/ensogl/lib/core/src/data/color/data.rs
@@ -291,3 +291,11 @@ 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 })
+    }
+}
diff --git a/src/rust/ensogl/lib/core/src/data/color/gradient.rs b/src/rust/ensogl/lib/core/src/data/color/gradient.rs
index 28237f0bc1..a688e76ec2 100644
--- a/src/rust/ensogl/lib/core/src/data/color/gradient.rs
+++ b/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/src/rust/ensogl/lib/core/src/display/shape/primitive/def/var.rs b/src/rust/ensogl/lib/core/src/display/shape/primitive/def/var.rs
index ac370a5179..cd5543127b 100644
--- a/src/rust/ensogl/lib/core/src/display/shape/primitive/def/var.rs
+++ b/src/rust/ensogl/lib/core/src/display/shape/primitive/def/var.rs
@@ -640,3 +640,38 @@ 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) => {
+                Var::Dynamic(format!("srgba({0}.raw.x,{0}.raw.y,{0}.raw.z,{1})",t.glsl(),alpha.glsl()).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)) => {
+                Var::Static(color::Rgba::new(t.data.red,t.data.green,t.data.blue,*alpha*t.data.alpha))
+            },
+            (t, alpha) => {
+                Var::Dynamic(format!("srgba({0}.raw.x,{0}.raw.y,{0}.raw.z,{0}.raw.w*{1})",t.glsl(),alpha.glsl()).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/src/rust/ensogl/lib/core/src/gui.rs b/src/rust/ensogl/lib/core/src/gui.rs
index 0e4a325817..1894a034a3 100644
--- a/src/rust/ensogl/lib/core/src/gui.rs
+++ b/src/rust/ensogl/lib/core/src/gui.rs
@@ -2,3 +2,4 @@
 
 pub mod component;
 pub mod cursor;
+#[macro_use] pub mod style;
diff --git a/src/rust/ensogl/lib/core/src/gui/cursor.rs b/src/rust/ensogl/lib/core/src/gui/cursor.rs
index 76b0deb2a5..05eb5d0cfc 100644
--- a/src/rust/ensogl/lib/core/src/gui/cursor.rs
+++ b/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/src/rust/ensogl/lib/core/src/gui/style.rs b/src/rust/ensogl/lib/core/src/gui/style.rs
new file mode 100644
index 0000000000..dd6681ab90
--- /dev/null
+++ b/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/src/rust/ensogl/lib/text/src/component/area.rs b/src/rust/ensogl/lib/text/src/component/area.rs
index af5391a0e7..9a454e0465 100644
--- a/src/rust/ensogl/lib/text/src/component/area.rs
+++ b/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/src/rust/ide/view/graph-editor/src/component.rs b/src/rust/ide/view/graph-editor/src/component.rs
index 2c2dd43290..991bfd8e23 100644
--- a/src/rust/ide/view/graph-editor/src/component.rs
+++ b/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/src/rust/ide/view/graph-editor/src/component/node.rs b/src/rust/ide/view/graph-editor/src/component/node.rs
index d0e2acd2fa..7e817585d4 100644
--- a/src/rust/ide/view/graph-editor/src/component/node.rs
+++ b/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/src/rust/ide/view/graph-editor/src/component/node/output/area.rs b/src/rust/ide/view/graph-editor/src/component/node/output/area.rs
index 1a83ddfee4..9d4fe93dcb 100644
--- a/src/rust/ide/view/graph-editor/src/component/node/output/area.rs
+++ b/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/src/rust/ide/view/graph-editor/src/component/node/output/port.rs b/src/rust/ide/view/graph-editor/src/component/node/output/port.rs
index 7adb36a11f..302b684ed4 100644
--- a/src/rust/ide/view/graph-editor/src/component/node/output/port.rs
+++ b/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,11 @@ 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/src/rust/ide/view/graph-editor/src/component/tooltip.rs b/src/rust/ide/view/graph-editor/src/component/tooltip.rs
new file mode 100644
index 0000000000..ad93510a74
--- /dev/null
+++ b/src/rust/ide/view/graph-editor/src/component/tooltip.rs
@@ -0,0 +1,219 @@
+//! 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::text_label::TextLabel;
+use ensogl::animation::hysteretic::HystereticAnimation;
+
+
+
+// =================
+// === Constants ===
+// =================
+
+const HIDE_DELAY_DURATION_MS : f32 = 150.0;
+const SHOW_DELAY_DURATION_MS : f32 = 150.0;
+
+
+
+// ==============
+// === 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 position of the tooltip relative to the cursor location.
+pub enum Offset {
+    Top, Bottom, Left, Right
+}
+
+impl Default for Offset {
+    fn default() -> Self {
+        Offset::Bottom
+    }
+}
+
+ensogl::define_endpoints! {
+    Input {
+        set_style    (Option<Style>),
+        set_location (Vector2),
+        set_offset   (Offset)
+    }
+}
+
+
+
+// =============
+// === Model ===
+// =============
+
+#[derive(Clone,Debug)]
+struct Model {
+    tooltip : TextLabel,
+    root    : display::object::Instance,
+}
+
+impl Model {
+    fn new(app:&Application) -> Self {
+        let logger  = Logger::new("TooltipModel");
+        let tooltip = TextLabel::new(app.clone_ref());
+        let root    = display::object::Instance::new(&logger);
+        root.add_child(&tooltip);
+
+        let tgt_layer = &app.display.scene().layers.cursor;
+        tgt_layer.add_exclusive(&tooltip);
+
+        Self{tooltip,root}
+    }
+
+    fn set_location(&self, position:Vector2, size:Vector2, layout: Offset) {
+        let layout_offset = match layout {
+            Offset::Top => {
+                Vector2::new(0.0,size.y * 0.5)
+            }
+            Offset::Bottom => {
+                Vector2::new(0.0,-size.y * 0.5)
+            }
+            Offset::Left => {
+              Vector2::new(-size.x / 2.0,0.0)
+            }
+            Offset::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_content(&self,update:&Option<Style>) {
+        if let Some(tooltip_update) = update {
+            if let Some(style) = tooltip_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>,
+    /// Public FRP api.
+    pub frp : Rc<Frp>
+}
+
+impl Tooltip {
+    /// Constructor.
+    pub fn new(app : &Application) -> Self {
+        let model = Rc::new(Model::new(app));
+        let frp   = Rc::new(Frp::new());
+        Self{model,frp}.init()
+    }
+
+    fn init(self,) -> Self {
+        let frp        = &self.frp;
+        let network    = &frp.network;
+        let model      = &self.model;
+
+        let hysteretic_transition = HystereticAnimation::new(&network,HIDE_DELAY_DURATION_MS,SHOW_DELAY_DURATION_MS);
+
+        frp::extend! { network
+
+             eval frp.set_style ((t) model.set_content(t));
+
+             show_text         <- frp.set_style.unwrap().map(|c| c.has_text());
+             on_has_content    <- show_text.on_true();
+             on_has_no_content <- show_text.on_false();
+
+             hysteretic_transition.to_start <+ on_has_content;
+             hysteretic_transition.to_end   <+ on_has_no_content;
+
+             location_update <- all(frp.set_location,model.tooltip.frp.size,frp.set_offset);
+             eval location_update (((pos,size,offset)) model.set_location(*pos,*size,*offset));
+        }
+
+        frp::extend! { network
+             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);
+        self
+    }
+}
+
+impl display::Object for Tooltip {
+    fn display_object(&self) -> &display::object::Instance {
+        &self.model.root.display_object()
+    }
+}
diff --git a/src/rust/ide/view/graph-editor/src/lib.rs b/src/rust/ide/view/graph-editor/src/lib.rs
index 52d1ba3cb6..be6c89127d 100644
--- a/src/rust/ide/view/graph-editor/src/lib.rs
+++ b/src/rust/ide/view/graph-editor/src/lib.rs
@@ -35,9 +35,12 @@ pub mod builtin;
 pub mod data;
 
 use crate::component::node;
-use crate::component::visualization;
-use crate::component::visualization::MockDataGenerator3D;
+use crate::component::tooltip::Offset;
+use crate::component::tooltip::Tooltip;
+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;
@@ -1007,10 +1010,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);
@@ -1028,6 +1032,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());
@@ -1207,11 +1212,11 @@ pub struct GraphEditorModel {
     pub nodes          : Nodes,
     pub edges          : Edges,
     pub vis_registry   : visualization::Registry,
+    tooltip            : Tooltip,
     touch_state        : TouchState,
     visualisations     : Visualisations,
     frp                : FrpEndpoints,
     navigator          : Navigator,
-
 }
 
 
@@ -1236,9 +1241,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()
     }
 
@@ -1250,6 +1257,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_offset(Offset::Bottom);
+        self.scene().add_child(&self.tooltip);
         self
     }
 
@@ -2235,6 +2245,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 +2371,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;
 
@@ -2960,7 +2973,19 @@ 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 ([model](pos) {
+            model.tooltip.frp.set_location(pos.xy())
+        });
+        eval node_tooltip ([model](tooltip_update) {
+            model.tooltip.frp.set_style(tooltip_update)
+        });
+    }
 
     GraphEditor {model,frp}
 }