Is it possible to add notification bubbles to buttons in GTK? I have a button in my toolbar that allows a user to see a list of pending tasks. I would like to show an indication of how much work is waiting for them in that list. I didn’t see anything in the reference docs that made this easy. My manual approach thus far looks like this:
I would like the red bubble to be raise up so that it seems to sit on the upper right corner of the button.
.titlebar button label {
// this part is working well:
border-radius: 22px;
background-color: red;
font-size: 14px;
color: white;
padding: 4px;
// this part is not recognized by GTK:
position: relative;
top: -7px;
}
The bottom two properties is how I might achieve this effect with CSS in a web context. However the position and top properties aren’t in the subset of CSS used by GTK. It makes some intuitive sense that child widgets have to exist within the boundary of their parent. I could place the notification bubble text in a separate label outside the button but without relative positioning, I don’t see a way to make the label overlap the button at all.
Does anyone know of a way to do this with either core GTK functionality or perhaps with a custom widget from a library built atop GTK?
I could place the notification bubble text in a separate label outside the button but without relative positioning, I don’t see a way to make the label overlap the button at all.
GtkOverlay might be what you want, with the Button as the main child and the Label as an overlay child.
You can then position therein by using the overlay child’s :[hv]align properties, or CSS margins also work for offsetting it over the main child.
With the suggestion from @dboles I was able to achieve exactly what I was striving for!
The ToggleButton is added as the main child of the GtkOverlay. A separate Label is added as an overlay widget. The ToggleButton has an end margin of 8 to give the button some space to shine through. The Label has a top margin of 3 in order to prevent it from appearing to ride the very top edge of the HeaderBar.
I realised later there is also AdwTabButton in libadwaita, which is aiming for a similar appearance, though it requires that you be using an AdwTabView as basis rather than being usable for arbitrary purposes - but just in case of interest.
