mirror of
https://github.com/emilk/egui.git
synced 2026-09-03 23:30:04 -04:00
Support interactive widgets in tooltips (#4596)
* 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):  ### 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:
85
crates/egui_demo_lib/src/demo/tooltips.rs
Normal file
85
crates/egui_demo_lib/src/demo/tooltips.rs
Normal file
@@ -0,0 +1,85 @@
|
||||
#[derive(Clone, PartialEq, Eq)]
|
||||
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
|
||||
pub struct Tooltips {
|
||||
enabled: bool,
|
||||
}
|
||||
|
||||
impl Default for Tooltips {
|
||||
fn default() -> Self {
|
||||
Self { enabled: true }
|
||||
}
|
||||
}
|
||||
|
||||
impl super::Demo for Tooltips {
|
||||
fn name(&self) -> &'static str {
|
||||
"🗖 Tooltips"
|
||||
}
|
||||
|
||||
fn show(&mut self, ctx: &egui::Context, open: &mut bool) {
|
||||
use super::View as _;
|
||||
let window = egui::Window::new("Tooltips")
|
||||
.constrain(false) // So we can test how tooltips behave close to the screen edge
|
||||
.resizable(false)
|
||||
.scroll(false)
|
||||
.open(open);
|
||||
window.show(ctx, |ui| self.ui(ui));
|
||||
}
|
||||
}
|
||||
|
||||
impl super::View for Tooltips {
|
||||
fn ui(&mut self, ui: &mut egui::Ui) {
|
||||
ui.spacing_mut().item_spacing.y = 8.0;
|
||||
|
||||
ui.vertical_centered(|ui| {
|
||||
ui.add(crate::egui_github_link_file_line!());
|
||||
});
|
||||
|
||||
ui.label("All labels in this demo have tooltips.")
|
||||
.on_hover_text("Yes, even this one.");
|
||||
|
||||
ui.label("Some widgets have multiple tooltips!")
|
||||
.on_hover_text("The first tooltip.")
|
||||
.on_hover_text("The second tooltip.");
|
||||
|
||||
ui.label("Tooltips can contain interactive widgets.")
|
||||
.on_hover_ui(|ui| {
|
||||
ui.label("This tooltip contains a link:");
|
||||
ui.hyperlink_to("www.egui.rs", "https://www.egui.rs/")
|
||||
.on_hover_text("The tooltip has a tooltip in it!");
|
||||
});
|
||||
|
||||
ui.label("You can put selectable text in tooltips too.")
|
||||
.on_hover_ui(|ui| {
|
||||
ui.style_mut().interaction.selectable_labels = true;
|
||||
ui.label("You can select this text.");
|
||||
});
|
||||
|
||||
ui.separator(); // ---------------------------------------------------------
|
||||
|
||||
let tooltip_ui = |ui: &mut egui::Ui| {
|
||||
ui.horizontal(|ui| {
|
||||
ui.label("This tooltip was created with");
|
||||
ui.code(".on_hover_ui(…)");
|
||||
});
|
||||
};
|
||||
let disabled_tooltip_ui = |ui: &mut egui::Ui| {
|
||||
ui.label("A fifferent tooltip when widget is disabled.");
|
||||
ui.horizontal(|ui| {
|
||||
ui.label("This tooltip was created with");
|
||||
ui.code(".on_disabled_hover_ui(…)");
|
||||
});
|
||||
};
|
||||
|
||||
ui.label("You can have different tooltips depending on whether or not a widget is enabled or not:")
|
||||
.on_hover_text("Check the tooltip of the button below, and see how it changes dependning on whether or not it is enabled.");
|
||||
|
||||
ui.horizontal(|ui| {
|
||||
ui.checkbox(&mut self.enabled, "Enabled")
|
||||
.on_hover_text("Controls whether or not the button below is enabled.");
|
||||
|
||||
ui.add_enabled(self.enabled, egui::Button::new("Sometimes clickable"))
|
||||
.on_hover_ui(tooltip_ui)
|
||||
.on_disabled_hover_ui(disabled_tooltip_ui);
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user