Implemented Tooltip as Pure

Cargo.toml

@@ -93,6 +93,7 @@ members = [
     "examples/pure/pick_list",
     "examples/pure/todos",
     "examples/pure/tour",
+    "examples/pure/tooltip",
     "examples/websocket",
 ]
 

examples/pure/tooltip/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "pure_tooltip"
+version = "0.1.0"
+authors = ["Héctor Ramón Jiménez <[email protected]>", "Casper Rogild Storm"]
+edition = "2021"
+publish = false
+
+[dependencies]
+iced = { path = "../../..", features = ["pure"] }

examples/pure/tooltip/src/main.rs

@@ -0,0 +1,93 @@
+use iced::pure::{
+    button, container, tooltip, widget::tooltip::Position, Element, Sandbox,
+};
+use iced::{Length, Settings};
+
+pub fn main() -> iced::Result {
+    Example::run(Settings::default())
+}
+
+struct Example {
+    position: Position,
+}
+
+#[derive(Debug, Clone)]
+enum Message {
+    ChangePosition,
+}
+
+impl Sandbox for Example {
+    type Message = Message;
+
+    fn new() -> Self {
+        Self {
+            position: Position::Bottom,
+        }
+    }
+
+    fn title(&self) -> String {
+        String::from("Tooltip - Iced")
+    }
+
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::ChangePosition => {
+                let position = match &self.position {
+                    Position::FollowCursor => Position::Top,
+                    Position::Top => Position::Bottom,
+                    Position::Bottom => Position::Left,
+                    Position::Left => Position::Right,
+                    Position::Right => Position::FollowCursor,
+                };
+
+                self.position = position
+            }
+        }
+    }
+
+    fn view(&self) -> Element<Message> {
+        let tooltip = tooltip(
+            button("Press to change position")
+                .on_press(Message::ChangePosition),
+            position_to_text(self.position),
+            self.position,
+        )
+        .gap(10)
+        .style(style::Tooltip);
+
+        container(tooltip)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .center_x()
+            .center_y()
+            .into()
+    }
+}
+
+fn position_to_text<'a>(position: Position) -> &'a str {
+    match position {
+        Position::FollowCursor => "Follow Cursor",
+        Position::Top => "Top",
+        Position::Bottom => "Bottom",
+        Position::Left => "Left",
+        Position::Right => "Right",
+    }
+}
+
+mod style {
+    use iced::container;
+    use iced::Color;
+
+    pub struct Tooltip;
+
+    impl container::StyleSheet for Tooltip {
+        fn style(&self) -> container::Style {
+            container::Style {
+                text_color: Some(Color::from_rgb8(0xEE, 0xEE, 0xEE)),
+                background: Some(Color::from_rgb(0.11, 0.42, 0.87).into()),
+                border_radius: 12.0,
+                ..container::Style::default()
+            }
+        }
+    }
+}

native/src/widget/tooltip.rs

@@ -98,6 +98,117 @@ pub enum Position {
     Right,
 }
 
+/// Draws a [`Tooltip`].
+pub fn draw<Renderer: crate::Renderer>(
+    renderer: &mut Renderer,
+    inherited_style: &renderer::Style,
+    layout: Layout<'_>,
+    cursor_position: Point,
+    viewport: &Rectangle,
+    position: Position,
+    gap: u16,
+    padding: u16,
+    style_sheet: &dyn container::StyleSheet,
+    layout_text: impl FnOnce(&Renderer, &layout::Limits) -> layout::Node,
+    draw_text: impl FnOnce(
+        &mut Renderer,
+        &renderer::Style,
+        Layout<'_>,
+        Point,
+        &Rectangle,
+    ),
+) {
+    let bounds = layout.bounds();
+
+    if bounds.contains(cursor_position) {
+        let gap = f32::from(gap);
+        let style = style_sheet.style();
+
+        let defaults = renderer::Style {
+            text_color: style.text_color.unwrap_or(inherited_style.text_color),
+        };
+
+        let text_layout = layout_text(
+            renderer,
+            &layout::Limits::new(Size::ZERO, viewport.size())
+                .pad(Padding::new(padding)),
+        );
+
+        let padding = f32::from(padding);
+        let text_bounds = text_layout.bounds();
+        let x_center = bounds.x + (bounds.width - text_bounds.width) / 2.0;
+        let y_center = bounds.y + (bounds.height - text_bounds.height) / 2.0;
+
+        let mut tooltip_bounds = {
+            let offset = match position {
+                Position::Top => Vector::new(
+                    x_center,
+                    bounds.y - text_bounds.height - gap - padding,
+                ),
+                Position::Bottom => Vector::new(
+                    x_center,
+                    bounds.y + bounds.height + gap + padding,
+                ),
+                Position::Left => Vector::new(
+                    bounds.x - text_bounds.width - gap - padding,
+                    y_center,
+                ),
+                Position::Right => Vector::new(
+                    bounds.x + bounds.width + gap + padding,
+                    y_center,
+                ),
+                Position::FollowCursor => Vector::new(
+                    cursor_position.x,
+                    cursor_position.y - text_bounds.height,
+                ),
+            };
+
+            Rectangle {
+                x: offset.x - padding,
+                y: offset.y - padding,
+                width: text_bounds.width + padding * 2.0,
+                height: text_bounds.height + padding * 2.0,
+            }
+        };
+
+        if tooltip_bounds.x < viewport.x {
+            tooltip_bounds.x = viewport.x;
+        } else if viewport.x + viewport.width
+            < tooltip_bounds.x + tooltip_bounds.width
+        {
+            tooltip_bounds.x =
+                viewport.x + viewport.width - tooltip_bounds.width;
+        }
+
+        if tooltip_bounds.y < viewport.y {
+            tooltip_bounds.y = viewport.y;
+        } else if viewport.y + viewport.height
+            < tooltip_bounds.y + tooltip_bounds.height
+        {
+            tooltip_bounds.y =
+                viewport.y + viewport.height - tooltip_bounds.height;
+        }
+
+        renderer.with_layer(*viewport, |renderer| {
+            container::draw_background(renderer, &style, tooltip_bounds);
+
+            draw_text(
+                renderer,
+                &defaults,
+                Layout::with_offset(
+                    Vector::new(
+                        tooltip_bounds.x + padding,
+                        tooltip_bounds.y + padding,
+                    ),
+                    &text_layout,
+                ),
+                cursor_position,
+                viewport,
+            )
+        });
+    }
+}
+
 impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Tooltip<'a, Message, Renderer>
 where
@@ -169,100 +280,32 @@ where
             viewport,
         );
 
-        let bounds = layout.bounds();
-
-        if bounds.contains(cursor_position) {
-            let gap = f32::from(self.gap);
-            let style = self.style_sheet.style();
-
-            let defaults = renderer::Style {
-                text_color: style
-                    .text_color
-                    .unwrap_or(inherited_style.text_color),
-            };
-
-            let text_layout = Widget::<(), Renderer>::layout(
-                &self.tooltip,
-                renderer,
-                &layout::Limits::new(Size::ZERO, viewport.size())
-                    .pad(Padding::new(self.padding)),
-            );
-
-            let padding = f32::from(self.padding);
-            let text_bounds = text_layout.bounds();
-            let x_center = bounds.x + (bounds.width - text_bounds.width) / 2.0;
-            let y_center =
-                bounds.y + (bounds.height - text_bounds.height) / 2.0;
-
-            let mut tooltip_bounds = {
-                let offset = match self.position {
-                    Position::Top => Vector::new(
-                        x_center,
-                        bounds.y - text_bounds.height - gap - padding,
-                    ),
-                    Position::Bottom => Vector::new(
-                        x_center,
-                        bounds.y + bounds.height + gap + padding,
-                    ),
-                    Position::Left => Vector::new(
-                        bounds.x - text_bounds.width - gap - padding,
-                        y_center,
-                    ),
-                    Position::Right => Vector::new(
-                        bounds.x + bounds.width + gap + padding,
-                        y_center,
-                    ),
-                    Position::FollowCursor => Vector::new(
-                        cursor_position.x,
-                        cursor_position.y - text_bounds.height,
-                    ),
-                };
-
-                Rectangle {
-                    x: offset.x - padding,
-                    y: offset.y - padding,
-                    width: text_bounds.width + padding * 2.0,
-                    height: text_bounds.height + padding * 2.0,
-                }
-            };
-
-            if tooltip_bounds.x < viewport.x {
-                tooltip_bounds.x = viewport.x;
-            } else if viewport.x + viewport.width
-                < tooltip_bounds.x + tooltip_bounds.width
-            {
-                tooltip_bounds.x =
-                    viewport.x + viewport.width - tooltip_bounds.width;
-            }
-
-            if tooltip_bounds.y < viewport.y {
-                tooltip_bounds.y = viewport.y;
-            } else if viewport.y + viewport.height
-                < tooltip_bounds.y + tooltip_bounds.height
-            {
-                tooltip_bounds.y =
-                    viewport.y + viewport.height - tooltip_bounds.height;
-            }
-
-            renderer.with_layer(*viewport, |renderer| {
-                container::draw_background(renderer, &style, tooltip_bounds);
+        let tooltip = &self.tooltip;
 
+        draw(
+            renderer,
+            inherited_style,
+            layout,
+            cursor_position,
+            viewport,
+            self.position,
+            self.gap,
+            self.padding,
+            self.style_sheet.as_ref(),
+            |renderer, limits| {
+                Widget::<(), Renderer>::layout(tooltip, renderer, limits)
+            },
+            |renderer, defaults, layout, cursor_position, viewport| {
                 Widget::<(), Renderer>::draw(
-                    &self.tooltip,
+                    tooltip,
                     renderer,
-                    &defaults,
-                    Layout::with_offset(
-                        Vector::new(
-                            tooltip_bounds.x + padding,
-                            tooltip_bounds.y + padding,
-                        ),
-                        &text_layout,
-                    ),
+                    defaults,
+                    layout,
                     cursor_position,
                     viewport,
                 );
-            });
-        }
+            },
+        )
     }
 }
 
@@ -273,8 +316,8 @@ where
     Message: 'a,
 {
     fn from(
-        column: Tooltip<'a, Message, Renderer>,
+        tooltip: Tooltip<'a, Message, Renderer>,
     ) -> Element<'a, Message, Renderer> {
-        Element::new(column)
+        Element::new(tooltip)
     }
 }

pure/src/helpers.rs

@@ -38,6 +38,17 @@ pub fn button<'a, Message, Renderer>(
     widget::Button::new(content)
 }
 
+pub fn tooltip<'a, Message, Renderer>(
+    content: impl Into<Element<'a, Message, Renderer>>,
+    tooltip: impl ToString,
+    position: widget::tooltip::Position,
+) -> widget::Tooltip<'a, Message, Renderer>
+where
+    Renderer: iced_native::text::Renderer,
+{
+    widget::Tooltip::new(content, tooltip, position)
+}
+
 pub fn text<Renderer>(text: impl Into<String>) -> widget::Text<Renderer>
 where
     Renderer: iced_native::text::Renderer,

pure/src/widget.rs

@@ -12,6 +12,7 @@ pub mod slider;
 pub mod svg;
 pub mod text_input;
 pub mod toggler;
+pub mod tooltip;
 pub mod tree;
 
 mod column;
@@ -37,6 +38,7 @@ pub use svg::Svg;
 pub use text::Text;
 pub use text_input::TextInput;
 pub use toggler::Toggler;
+pub use tooltip::{Position, Tooltip};
 pub use tree::Tree;
 
 use iced_native::event::{self, Event};