I thought that I would make a thread about this after opening a bug report on the problem. Right now there seems to be some inconsistencies with the various tooltips that appear when plasmoids are hovered over. The predominant behavior is to have an icon in the left (usually an application icon, but some tooltips use icons from the plasma theme (see the network plasmoid in the system tray for example)), there are two lines of text, the applet name done in bolder larger font, and beneath that some smaller text describing the state of the applet (no notifications, no devices, etc.). Some icons like power manager do not include the applet name, but only the state of the applet, this is what I filed a bug report on. So the point of the thread is to create the standard to follow for tooltips. I think that the majority of tooltips get it right with the icon on the left and the applet name and status with the font settings as they are. The two problems with this are, should the icon be an application icon, or should they follow the plasma theme and use the monotone icon that appears in the panel? Also, the system tray applet itself has the small arrow that shows and hides additional icons. This tooltips lacks both an icon and the name of the applet.

Ha, just yesterday we talked about how Plasma tooltips are an inconsistent mess and that we hope the community will help us fix it, and today I see your post

So, yes, we really should devise guidelines for the tooltips. We have an HIG for tooltips, but it's focused more on application tooltips right now, so it would make sense to me that we add a section on rich tooltips such as those in Plasma.

Would you like to head the effort? That would not mean that you'd have to do all the work, but your task would be to make sure that this thread leads to a useful result and coordinate with the HIG and Plasma team whenever necessary. Of course you don't have to do it, but it would be great if you could, given that it's obviously an important topic to you.

Sure, that sounds like something I can do. Hopefully more people see this thread and help corroborate to get the tooltips to be as good as possible.

enoop wrote:Sure, that sounds like something I can do. Hopefully more people see this thread and help corroborate to get the tooltips to be as good as possible.

Great, so you're in charge now!
With the Plasma 5.0 release just around the corner, many VDG members are quite busy at the moment, but after the release, our goal is to breathe more life back into this forum again.

Excellent enoop!

For the start I think we should get an idea what is handled by tooltips in Plasma. From the top of my head there's the task switcher, that use it to show application previews; there's the system tray, where it displays basic information about the applets; all plasmoids use it to display information about what they are, and then there's the Folder view which uses them to show basic file information and a preview (even though this part is a bit broken right now).

So, those are already pretty diverse use cases. My biggest pet peeve right now is that tooltips have no size limitation. On one hand it's nice, because it enables things like previews, on the other hand this lack of uniformity is a bit ugly IMHO.

Some problems with consistency that I've noticed:
1. Placement of icons, most tooltips put the icon centered aligned on the first row of text on the left side of the tooltip
*As some tooltips have three lines of text instead of two, I would suggest centering the icon in the center of the tooltip, don't align it with the top row of text. This will make all tooltips have icons in the same place.

2. Applet name: some plasmoids will put the name of the plasmoid into the tooltip (notifications does this for example), others do not bother doing this.
*I would suggest having every tooltip besides the folder view ones to follow this behavior. Part of the use of the tooltips is to tell the user what the plasmoid is, as most plasmoids are only buttons with not text.

3. Number of text lines: Most tooltips have 2 lines, but if showing the plasmoid name was implemented by default, some would have three
* I think that a tooltip should only have two lines of texts to avoid being too crowded. The two examples of a tooltip that would have three lines are the calander and the network applet. For the calendar, I think you could fit all the information into one line. The network applet is a harder one to decide on, it lists both the adapter name and the connection state. The adapter name may be hidden by default, that's what I would do if it were up to me.

4. Text style: standard seems to be the first line is much bigger and drawn normally, the second line is smaller and much lighter.
*I think that this is a good standard. Have the applet name be larger and it's state to be the lighter second row.

5. Icon: Some tooltips use the plasma theme icon (network) some use application icon (Klipper)
*Second style should be used for all tooltips

6. Size: Doesn't seem to be a minimum size, maximum size seems variable
*I suppose the maximum size should be around the same as the task manager tooltip.

That's all I can think of for now, but I'll keep poking around plasma 5 and see if there are any other problems with the tooltips.

Great points so far, thanks!
Some comments:

1. Question is: Do the icon convey any useful information or do they have considerable aesthetic benefit? I'm nut sure if there should be icons in the tooltips. If there should be, the suggested alignment makes sense.

2. Yup.

3. If we want to avoid "jumping" of tooltips when moving the cursor along the panel, we'd have to keep them on the same height. The default should definitely be one line of "content", but I'm sure there will be some exceptions.

4. I'll leave that to Andrew since he's our go-to guy for typography atm.

5. I assume that for Klipper it's because it currently isn't even a Plasmoid. That will change with the next version, though. But yes, again if we decide icons should be used, they should be those from the plasma theme because otherwise there might be a strong visual disconnection if the icons are very different

6. I think it makes sense to aim for at least the same height for most tooltips, so that the transition between two tooltips is more smooth. Maybe a certain range for the width would be helpful, too.

1. I think that they provide a bit of aesthetic value to the tooltips. Without them, the tooltips seem to be very light. The icons balance the text.

5. I believe only the device notifier uses the same plasma theme icon. I do agree that it might be confusing to newer users, changing all of the other tooltips to use the plasma theme icons. Although the task manager uses the application icon and this should not be changed.

I was just thinking about points three and six, would it be better to have every tooltip constrained to the one line of content and have some be larger than otherwise.

It might be worth identifying the different places tooltips are used throughout the workspace to ensure we're accounting for all the reasonable cases in coming up with a tooltip guideline. If it helps here's what I came up with off the top of my head:

Taskbar item tooltips
Panel plasmoid tooltips
Desktop plasmoid tooltips
Toolbutton tooltips
Window button tooltips
System Settings category tooltips
Others?

Hopefully that's helpful to begin to distill the types of tooltips into even fewer cases. enoop, I'm guessing that you should be able to narrow it down to between two and four categories depending on how the information in the tooltip is used. Then we can talk about using the typography guideline to help nail down the appropriate text size, weight, number of lines, etc.

Hope this helps and thanks for agreeing to lead this enoop!

One other small tooltip that I noticed was the one that popups up when hovering over the battery in the battery applet. I'm going to make some mock ups of standardised plasma tooltips and I'll post them later (I'm not really very good at mockups so keep that in mind).

Trying to take a more graphic ideal for tooltips. This is what I would consider more helpful and to the point.

https://dribbble.com/shots/840624-Tool-tip
https://dribbble.com/shots/1231713-Assi ... sks-inline
https://dribbble.com/shots/867003-Music-tooltip

The idea is that they are not icon loaded and only use good typography to denote the function or information they are trying to show. They also have a pointed to indicate where they come from. I have noticed that the current ones don't have this and it would improve the idea of placement and origin.

As for the arrow point, I think it's kind of redundant. A user would know what was causing the tooltip because their mouse is hovering over it. I do like the graphical comment. As I said before, I think the icons in the tooltips add a nice weight to it, but if the topography can do that, I think it would solve some problems. The placement of the icon in the tooltips can be a problem. The default right now is to place it in the top left corner of the tooltip, This looks fine in cases of larger tooltips (for example if you have a large clipboard entry, the klipper tooltip's icon seems properly placed), but with smaller tooltips, the icon just seems unaligned (like the network tooltip makes the icon seems slightly off of the center alignment). Proper topography could add the weight I think the tooltips need without causing these problems.

Another thing that have been bugging me about tooltips. I don't really think the animation adds anything to them. Right now they move along the panel and transform into a different tooltip if you hover over something different. I think a more conservative fade effect could be used, make the tooltips stationary. As it is right now, the animation brings too much attention to the tooltip.

anditosan wrote:Trying to take a more graphic ideal for tooltips. This is what I would consider more helpful and to the point.

https://dribbble.com/shots/840624-Tool-tip
https://dribbble.com/shots/1231713-Assi ... sks-inline
https://dribbble.com/shots/867003-Music-tooltip

The idea is that they are not icon loaded and only use good typography to denote the function or information they are trying to show. They also have a pointed to indicate where they come from. I have noticed that the current ones don't have this and it would improve the idea of placement and origin.

I agree with anditosand here. I think it's not always feasible or desirable to include an icon into a tooltip. The arrow strengthens the association with the point of origin without visual clutter e.g. doubled icons. Of course the user know where they put the mouse, but I think that this can be really helpful.

enoop: Do you think we need more input here? If not, can you write a wrap-up so it can be turned into an HIG?