Overlays
Tooltip
A short label that appears while the pointer rests on an element.
Static preview
use iced::widget::{column, row, text};
use iced::{Alignment, Element};
use iced_cube::overlay::tooltip::tooltip;
use iced_cube::{Glyph, icon_button, lucide};
#[derive(Debug, Clone)]
pub enum Message {
Format(&'static str),
}
#[derive(Debug, Default)]
pub struct Example {
last: Option<&'static str>,
}
impl Example {
pub fn update(&mut self, message: Message) {
let Message::Format(name) = message;
self.last = Some(name);
}
pub fn view(&self) -> Element<'_, Message> {
let tool = |glyph: Glyph, name: &'static str| {
tooltip(icon_button(glyph).on_press(Message::Format(name)), name)
};
let status = match self.last {
Some(name) => format!("Applied: {name}"),
None => String::from("Hover an icon to see what it does."),
};
column![
row![
tool(lucide!(Bold), "Bold"),
tool(lucide!(Italic), "Italic"),
tool(lucide!(Underline), "Underline"),
tool(lucide!(Link), "Insert link"),
]
.spacing(4),
text(status).size(14),
]
.spacing(12)
.align_x(Alignment::Center)
.into()
}
}Usage
Use a tooltip to name an icon-only button or to add a short hint. Keep the label to a few words, and never put anything in it that people need to finish a task, because touch screens have no hover.
The bubble uses the primary colours, so it reads as dark on a light page and light on a dark one. It moves to stay inside the window when there is no room on the requested side.
Examples
Positions
The bubble on each side of its element.
Static preview
use iced::Element;
use iced::widget::row;
use iced_cube::button;
use iced_cube::overlay::tooltip::{Position, tooltip};
use iced_cube::primitives::button::Variant;
#[derive(Debug, Clone)]
pub enum Message {
Pressed,
}
#[derive(Debug, Default)]
pub struct Example;
impl Example {
pub fn update(&mut self, _message: Message) {}
pub fn view(&self) -> Element<'_, Message> {
let sides = [
Position::Top,
Position::Bottom,
Position::Left,
Position::Right,
];
row(sides.map(|position| {
tooltip(
button(format!("{position:?}"))
.variant(Variant::Outline)
.on_press(Message::Pressed),
format!("Shown on the {position:?}").to_lowercase(),
)
.position(position)
.into()
}))
.spacing(8)
.into()
}
}API
| Item | Description |
|---|---|
tooltip(content, label) | Shows the label in a bubble while the pointer is over the content. |
.position(Position) | Top, Bottom, Left, Right or FollowCursor. Defaults to Top. |
.delay(duration) | How long the pointer has to rest on the element before the bubble appears. Defaults to zero, so it appears straight away. |
style(tokens) | The bubble style, for reuse in custom overlays. |