43 lines
1.3 KiB
Plaintext
43 lines
1.3 KiB
Plaintext
import { Theme, SpacingSystem, Typography, Animations } from "../theme/theme.slint";
|
|
|
|
export component Tooltip {
|
|
in property <string> text: "";
|
|
in property <bool> show: false;
|
|
|
|
if root.show: popup := Rectangle {
|
|
y: -self.height - 8px;
|
|
x: (parent.width - self.width) / 2;
|
|
width: tooltip-text.width + SpacingSystem.spacing.s3 * 2;
|
|
height: tooltip-text.height + SpacingSystem.spacing.s2 * 2;
|
|
background: Theme.colors.foreground;
|
|
border-radius: SpacingSystem.radius.sm;
|
|
|
|
drop-shadow-blur: 8px;
|
|
drop-shadow-color: #00000030;
|
|
drop-shadow-offset-y: 2px;
|
|
|
|
opacity: root.show ? 1 : 0;
|
|
animate opacity { duration: Animations.durations.fast; }
|
|
|
|
tooltip-text := Text {
|
|
text: root.text;
|
|
color: Theme.colors.background;
|
|
font-size: Typography.sizes.xs;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
x: SpacingSystem.spacing.s3;
|
|
y: SpacingSystem.spacing.s2;
|
|
}
|
|
|
|
// Arrow
|
|
arrow := Path {
|
|
y: parent.height;
|
|
x: (parent.width - 8px) / 2;
|
|
width: 8px;
|
|
height: 4px;
|
|
fill: Theme.colors.foreground;
|
|
commands: "M 0 0 L 4 4 L 8 0 Z";
|
|
}
|
|
}
|
|
}
|