migrations/egui
1
0
Fork 0
mirror of https://github.com/emilk/egui.git synced 2026-08-29 04:40:03 -04:00
Code Activity

Support interactive widgets in tooltips (#4596)

Browse Source 
* Closes https://github.com/emilk/egui/issues/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
This commit is contained in:
Emil Ernerfeldt
2024-06-03 11:37:06 +02:00
committed by GitHub
parent 7b3752fde9
commit c0a9800d05
11 changed files with 274 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
tests/test_size_pass/src/main.rs
View File

@@ -8,9 +8,56 @@ fn main() -> eframe::Result<()> {
let options = eframe::NativeOptions::default();
eframe::run_simple_native("My egui App", options, move |ctx, _frame| {
// A bottom panel to force the tooltips to consider if the fit below or under the widget:
egui::TopBottomPanel::bottom("bottom").show(ctx, |ui| {
ui.horizontal(|ui| {
ui.vertical(|ui| {
ui.label("Single tooltips:");
for i in 0..3 {
ui.label(format!("Hover label {i} for a tooltip"))
.on_hover_text("There is some text here");
}
});
ui.vertical(|ui| {
ui.label("Double tooltips:");
for i in 0..3 {
ui.label(format!("Hover label {i} for two tooltips"))
.on_hover_text("First tooltip")
.on_hover_text("Second tooltip");
}
});
});
ui.with_layout(egui::Layout::right_to_left(egui::Align::BOTTOM), |ui| {
ui.label("Hover for tooltip")
.on_hover_text("This is a rather long tooltip that needs careful positioning.");
});
});
egui::CentralPanel::default().show(ctx, |ui| {
if ui.button("Reset egui memory").clicked() {
ctx.memory_mut(|mem| *mem = Default::default());
ui.horizontal(|ui| {
if ui.button("Reset egui memory").clicked() {
ctx.memory_mut(|mem| *mem = Default::default());
}
ui.with_layout(egui::Layout::right_to_left(egui::Align::BOTTOM), |ui| {
ui.label("Hover for tooltip").on_hover_text(
"This is a rather long tooltip that needs careful positioning.",
);
ui.label("Hover for interactive tooltip").on_hover_ui(|ui| {
ui.label("This tooltip has a button:");
let _ = ui.button("Clicking me does nothing");
});
});
});
let has_tooltip = ui
.label("This label has a tooltip at the mouse cursor")
.on_hover_text_at_pointer("Told you!")
.is_tooltip_open();
let response = ui.label("This label gets a tooltip when the previous label is hovered");
if has_tooltip {
response.show_tooltip_text("The ever-present tooltip!");
}
ui.separator();
@@ -43,6 +90,19 @@ fn main() -> eframe::Result<()> {
alternatives.len(),
|i| alternatives[i],
);
egui::ComboBox::from_id_source("combo")
.selected_text("ComboBox")
.width(100.0)
.show_ui(ui, |ui| {
ui.ctx()
.debug_painter()
.debug_rect(ui.max_rect(), egui::Color32::RED, "");
ui.label("Hello");
ui.label("World");
ui.label("Hellooooooooooooooooooooooooo");
});
});
})
}