Skip to content

Tooltip widget#465

Merged
hecrj merged 8 commits intoiced-rs:masterfrom
90-008:tooltip-widget
Feb 24, 2021
Merged

Tooltip widget#465
hecrj merged 8 commits intoiced-rs:masterfrom
90-008:tooltip-widget

Conversation

@90-008
Copy link
Copy Markdown
Contributor

@90-008 90-008 commented Jul 28, 2020

This PR implements #460 as described in the issue. I have added a very simple example (definitely needs to be improved) to showcase the widget. I'm not sure about the widget name, since this acts as kind of a Container too. Or maybe the API could be done in a different way? I'd like to hear ideas about this.

Stuff to do:

  • Improve the example
  • Make the tooltip change position if it overflows a window edge to keep it visible

@90-008 90-008 marked this pull request as draft July 28, 2020 15:39

fn overlay(
&mut self,
layout: Layout<'_>,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could consider extending Widget::overlay to also provide a cursor_position. This should allow us to remove the local State of the Tooltip.

I'll think about it!

Copy link
Copy Markdown
Contributor Author

@90-008 90-008 Nov 3, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did that in b8c5ebc and added a overlay_content_bounds field. I need it to calculate where to put the tooltip (if tooltip_position is different than TooltipPosition::FollowCursor in Tooltip). There is probably a better way to do it (?), but that's what I do currently.

Edit: Could change overlay_content_bounds type to just Rectangle in Widget and use unwrap_or_else instead of map in UserInterface.

@clarkmoody
Copy link
Copy Markdown
Contributor

clarkmoody commented Nov 2, 2020

I would love for this to have an overlay_mode enum that allows me to place it relative to the anchor element rather than flying with the cursor. This would mimic the data-placement directive for Bootstrap tooltip.

enum OverlayMode {
    WithCursor, // current behavior
    Top,
    Right,
    Bottom,
    Left,
}

Edit: Great job so far! The example program works for me.

@90-008
Copy link
Copy Markdown
Contributor Author

90-008 commented Nov 2, 2020

I would love for this to have an overlay_mode enum that allows me to place it relative to the anchor element rather than flying with the cursor. This would mimic the data-placement directive for Bootstrap tooltip.

enum OverlayMode {
    WithCursor, // current behavior
    Top,
    Right,
    Bottom,
    Left,
}

Edit: Great job so far! The example program works for me.

Yep, that sounds like a good idea! I'll try implementing that when I have time.

@90-008
Copy link
Copy Markdown
Contributor Author

90-008 commented Nov 3, 2020

I would love for this to have an overlay_mode enum that allows me to place it relative to the anchor element rather than flying with the cursor. This would mimic the data-placement directive for Bootstrap tooltip.

enum OverlayMode {
    WithCursor, // current behavior
    Top,
    Right,
    Bottom,
    Left,
}

Edit: Great job so far! The example program works for me.

Yep, that sounds like a good idea! I'll try implementing that when I have time.

https://streamable.com/3rsu4r video showcasing this! @clarkmoody

@clarkmoody
Copy link
Copy Markdown
Contributor

https://streamable.com/3rsu4r video showcasing this! @clarkmoody

Oh yeah!

@hecrj hecrj added this to the 0.3.0 milestone Feb 19, 2021
@hecrj hecrj marked this pull request as ready for review February 23, 2021 01:18
@hecrj hecrj added the feature New feature or request label Feb 23, 2021
@hecrj hecrj changed the title [WIP] Add a Tooltip widget Tooltip widget Feb 23, 2021
Copy link
Copy Markdown
Member

@hecrj hecrj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for working on this! 🎉

I made some changes to restrict the API to text-only tooltips for the time being. As they are not interactive, we can avoid using the Widget::overlay method completely and simply use a Clip primitive in the renderer to produce a new layer.

I have also introduced gap, padding, and styling support (same as Container) and simplified the example a bit.

I think this is ready to go! We can improve it further in future iterations.

@hecrj hecrj merged commit a5fddf9 into iced-rs:master Feb 24, 2021
@hecrj hecrj mentioned this pull request Feb 24, 2021
@90-008 90-008 deleted the tooltip-widget branch February 24, 2021 11:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants