Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support interactive widgets in tooltips #4596

Merged
merged 10 commits into from
Jun 3, 2024
Merged

Conversation

emilk
Copy link
Owner

@emilk emilk commented May 31, 2024

In short

You can now put interactive widgets, like buttons and hyperlinks, in an tooltip using on_hover_ui. If you do, the tooltip will stay open as long as the user hovers it.

There is a new demo for this in the egui demo app (egui.rs):

interactive-tooltips

Design

Tooltips can now contain interactive widgets, such as buttons and links.
If they do, they will stay open when the user moves their pointer over them.

Widgets that do not contain interactive widgets disappear as soon as you no longer hover the underlying widget, just like before. This is so that they won't annoy the user.

To ensure not all tooltips with text in them are considered interactive, selectable_labels is false for tooltips contents by default. If you want selectable text in tooltips, either change the selectable_labels setting, or use Label::selectable.

ui.label("Hover me").on_hover_ui(|ui| {
    ui.style_mut().interaction.selectable_labels = true;
    ui.label("This text can be selected.");

    ui.add(egui::Label::new("This too.").selectable(true));
});

Changes

  • Layers in Order::Tooltip can now be interacted with

@emilk emilk added the egui label May 31, 2024
@emilk emilk force-pushed the emilk/clickable-tooltips branch from 2bb8a74 to d09657c Compare May 31, 2024 15:15
@emilk emilk force-pushed the emilk/clickable-tooltips branch from d09657c to 3a56396 Compare May 31, 2024 15:30
@YgorSouza
Copy link
Contributor

Being able to just copy text from a tooltip is super useful too. I do it all the time when coding:

image

I think it's more about having an easy way to toggle this "interactive tooltip" feature on and off for individual tooltips. Sometimes you really want it, and other times you really don't.

@rustbasic
Copy link
Contributor

My opinion is :

  1. There is a way to provide both the current tooltip and a new interactive tooltip.
    or
  2. here is a way to select between the existing tooltip and the new interactive tooltip as an option.

@YgorSouza
Copy link
Contributor

Should probably update the text on this button in the demo:

let tooltip_ui = |ui: &mut Ui| {
ui.heading("The name of the tooltip");
ui.horizontal(|ui| {
ui.label("This tooltip was created with");
ui.monospace(".on_hover_ui(…)");
});
let _ = ui.button("A button you can never press");
};

@emilk
Copy link
Owner Author

emilk commented Jun 2, 2024

Good catch!

@emilk emilk marked this pull request as ready for review June 2, 2024 19:25
@emilk emilk changed the title WIP: interact with contents of tooltips Support interactive widgets in tooltips Jun 2, 2024
@emilk
Copy link
Owner Author

emilk commented Jun 3, 2024

Follow-up issue:

@emilk emilk merged commit c0a9800 into master Jun 3, 2024
35 checks passed
@emilk emilk deleted the emilk/clickable-tooltips branch June 3, 2024 09:37
@emilk emilk added the feature New feature or request label Jun 27, 2024
hacknus pushed a commit to hacknus/egui that referenced this pull request Oct 30, 2024
* Closes emilk#1010

### In short
You can now put interactive widgets, like buttons and hyperlinks, in an
tooltip using `on_hover_ui`. If you do, the tooltip will stay open as
long as the user hovers it.

There is a new demo for this in the egui demo app (egui.rs):


![interactive-tooltips](https://github.com/emilk/egui/assets/1148717/97335ba6-fa3e-40dd-9da0-1276a051dbf2)

### Design
Tooltips can now contain interactive widgets, such as buttons and links.
If they do, they will stay open when the user moves their pointer over
them.

Widgets that do not contain interactive widgets disappear as soon as you
no longer hover the underlying widget, just like before. This is so that
they won't annoy the user.

To ensure not all tooltips with text in them are considered interactive,
`selectable_labels` is `false` for tooltips contents by default. If you
want selectable text in tooltips, either change the `selectable_labels`
setting, or use `Label::selectable`.

```rs
ui.label("Hover me").on_hover_ui(|ui| {
    ui.style_mut().interaction.selectable_labels = true;
    ui.label("This text can be selected.");

    ui.add(egui::Label::new("This too.").selectable(true));
});
```

### Changes
* Layers in `Order::Tooltip` can now be interacted with
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
egui feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Context menu on hover / clickable tooltips
3 participants