Skip to content

Support interactive widgets in tooltips - #4596

Merged
emilk merged 10 commits into
masterfrom
emilk/clickable-tooltips
Jun 3, 2024
Merged

emilk merged 10 commits into
masterfrom
emilk/clickable-tooltips

Conversation

@emilk

@emilk emilk commented May 31, 2024

Copy link
Copy Markdown
Owner

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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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

emilk commented Jun 2, 2024

Copy link
Copy Markdown
Owner Author

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
Comment thread crates/egui_demo_lib/src/demo/misc_demo_window.rs Outdated
@emilk

emilk commented Jun 3, 2024

Copy link
Copy Markdown
Owner Author

Follow-up issue:

@emilk
emilk merged commit c0a9800 into master Jun 3, 2024
@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