Rust egui Tutorial #18: Tooltips — Add Hover Hints to Any Widget

Rust egui Tutorial #18: Tooltips — Add Hover Hints to Any Widget

In this tutorial, you will learn how to enhance your egui-based Rust desktop applications by adding informative tooltips to widgets. We explore three tooltip styles—simple text hints, rich multi-widget tooltips, and cursor-following tooltips—plus a dark/light theme toggle to improve UI experience.

Code

use egui::{Color32, RichText, Visuals};

fn ui_example(ui: &mut egui::Ui, ctx: &egui::Context) {
  // Simple button with a basic tooltip text
  if ui.button("Hover me").on_hover_text("This is a simple tooltip").clicked() {
    // Button clicked logic here
  }

  // Rich tooltip with multiple widgets shown on hover
  ui.label("Hover over me").on_hover_ui(|ui| {
    ui.heading("Rich Tooltip");
    ui.label("You can add multiple widgets here.");
    ui.separator();
    ui.label(RichText::new("Colored text").color(Color32::LIGHT_BLUE));
  });

  // Tooltip that follows the mouse cursor
  ui.label("Cursor-following tooltip").on_hover_ui_at_pointer(|ui| {
    ui.label("I follow your cursor!");
  });

  // Toggle dark/light theme
  let mut dark_mode = ctx.style().visuals.dark_mode;
  if ui.checkbox(&mut dark_mode, "Dark Mode").changed() {
    ctx.set_visuals(if dark_mode { Visuals::dark() } else { Visuals::light() });
  }
}

Key Points

• .on_hover_text() adds simple string tooltips to any widget with minimal code.
• .on_hover_ui() enables complex, multi-widget tooltips with full egui layout capabilities.
• .on_hover_ui_at_pointer() creates tooltips that follow the mouse cursor for dynamic hints.
• Tooltips can be chained on any egui Response, making them easy to add anywhere.
• Switch between dark and light themes dynamically using ctx.set_visuals() for better UX.