-
Notifications
You must be signed in to change notification settings - Fork 584
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Easy-to-use declarative tooltips #6446
Comments
Yes, a |
I wlll probably use this workaround. Would be interesting if anyone has a more elegant/shorter solution using the current feature set (Slint 1.8.0). myTouchArea := TouchArea {
Button {
text: "Press me!"
}
}
Rectangle {
background: black;
x: 20px; y: 20px; height: 80px; width: 120px;
opacity: myTouchArea.has-hover ? 1 : 0;
border-radius: 5px;
Text {
text: "If you press this button, something cool will happen!";
padding: 10px;
color: white;
}
} This has the mentioned disadvantages of being a lot of code and having to manually set the position and size of the |
Thanks @PanCakeConnaisseur for this example! (for reference, there was also some discussion about tooltip before in #1617) |
@ogoffart Thank you for the link. Your solution using
I combined mine and your solution and came up with component ToolTipArea inherits Window {
preferred-height: 100%;
preferred-width: 100%;
in property <string> text;
in property <length> window-width;
Rectangle {
states [
visible when ta.has-hover: {
opacity: 1;
in {
animate opacity { duration: 175ms; delay: 1000ms; }
}
}
]
x: max(-parent.absolute-position.x, min(ta.mouse-x - 2rem, - parent.absolute-position.x + window-width - self.width));
y: ta.mouse-y + 2rem;
background: Palette.foreground;
border-radius: 0.4rem;
opacity: 0;
width: hlayout.preferred-width;
height: hlayout.preferred-height;
hlayout := HorizontalLayout {
padding: 0.6rem;
Text {
text <=> root.text;
wrap:word-wrap;
width: 15rem;
color: Palette.background;
font-size: root.default-font-size * 0.9;
}
}
}
ta := TouchArea {
@children
}
}
// Use later
ToolTipArea {
text : "Don't reencode audio stream(s) using Opus, but copy them as is.";
window-width: root.width; // <-- assuming that root is the main window component. avoid this?
copyAudio := Switch {
z:-7; // <-- avoid this?
text: "Copy original streams";
toggled => {
root.copy_toggled(self.checked);
}
}
} The problems in detail1. Rectangle's zThe tooltip rectangle does not cover elements that are outside of the same ToolTipArea (TouchArea). ToolTipArea {
z: -1;
// content
}
ToolTipArea {
z: -2;
// content
}
ToolTipArea {
z: -3;
// content
//...
} But setting a low 2. Main Window WidthI would like to keep the tooltip always inside the window. I created an expression for the |
I am currently trying to add tooltips to my application. By tooltip I mean a small box of text that appears when the users hovers over widgets for a few seconds that provides additional information/explanation of the setting modeled by the widget. The tooltip appears without a click and disappears when the user moves the mouse away from the widget (but not while he is still on the widget).
AFAICS the documentation recommends using a PopupWindow. AFAICS it has the following disadvantages:
PopupWindow
must be explicitly activated usingshow()
. When I want it to appear on hover (without a click), the only way is to add aTouchArea
and a rather complicatedPopupWindow
becomes a separate window, with its own window decorators, that needs to be closed manuallyPopupWindow
must be set manuallyPopupWindow
must be set manuallyTouchArea
can break the layout, e.g. when using it inside aRow
What I would prefer is to have
tooltip : "This is some additional information;
that can be added to most components including layouts such asHorizontalLayout
orTooltip { text : "This is some additional information; delay: 1s;}
that can be a child of most components.Slint would then display this tooltip whenever the user hovers over the area of the component, whether it is a button or a whole area. Slint would also take care of the size and position of the tooltip. It would adjust the size to be just big enough to contain the text and would position the tooltip such that it is close to the cursor, but out of its way and still inside the window. The background of the tooltip would be different enough for it to pop out visually.
Is anything like this planned?
The text was updated successfully, but these errors were encountered: