Intelligent Tooltips

Just wanted to talk about how I came up with one of the newest additions to our BixDesktop software: intelligent tooltips. But since this is my first real post, let me introduce myself and our app.

My name is Chris and I’ve been working with BixData for about a year. Before that I was doing the UI for eDonkey.BixDesktop is written in cross-platform C++ with QT as our UI framework.I live and work in NYC and will probably ramble about all of these things in later posts.

BixDesktop is software meant to monitor / admin lots (a cluster) of machines. There’s lots of different things you can do with thesoftware that’ll be explored later.Today I want to focus on what we call the Situation Room.

The Situation Room is where you can gather an overall sense of your cluster very quickly. I wanted a simple way to view a lot of machines
simultaneously and give detail when needed.As you can see above the Situation Room is divided into two section: Tags and Machines.The machines section shows which machines you are watching and what tags they have associated with them.The tags section shows all the tags (user created tags and auto-created smart tags) you have in your system. You can associate any user tag with any machine.A certain class of smart tags are Service check tags. These tags are auto-created in pairs, usually a Success/Fail pair.

The idea being that creating a ping check on some machines will auto tag them with the result of that ping check. You can see above that the hosts

192.168.0.1, 192.168.0.10, 192.168.0.8, 192.168.0.9, and localhost all are tagged with Ping ServiceCheck Success. This means they’re “up” and responding.

The others have all failed.

Now the topic of today’s post: intelligent tags.

Smart tags have some detail as to why the host has the tag associated with it. In the shot above you can see that 192.168.0.6 (sorry no mouse cursor in the capture)

has an HTTP ServiceCheck Fail tag because there was a timeout. I found that putting this kind of information in a tooltip made sense because it doesn’t clutter up the visual

space with these details that would distract from the overall view of the Situation Room.

Now come the requirements that will try and screw up the simplicity of the view. Some users really needed to be able to see multiple machines’ details simultaneously.

Several ideas were debated amongst the team.

• A tree view the user can switch to that they can access with a drop down (flat mode / tree mode). The tree would have the hosts at the parents and the details as children.
• An overlay that shows the details of a single tag when the user clicks it

The tree idea I disliked almost immediately. I’m generally against creating “modes” in applications. Not only is it confusing to the user in general, it would require creating / implementing another view and the creation of some way to switch the views. As far as the tree itself, I wanted to remove all hierarchical views from this application. The first version of BixData suffered because we relied on that type of view too much and most users (I’ve found) have a hard time with trees. Even if a tree were to be used, in order to see all the details simultaneously you’d have to expand all the children and, if you wanted to see something like all the HTTP results from five hosts you’d have to skip down several rows to compare them since they could be like

+ 192.168.0.1
|—-HTTP Fail: timeout
|—-Ping Fail: timeout
+192.168.0.2
|—-HTTP Fail: 404 error
|—-Ping success: 10 ms ping time

so looking from 192.168.0.1’s HTTP Fail to 192.168.0.2’s requires going down 3 rows, not ideal.

I initially thought the overlay idea would work, so I implemented it. QT allows me to do things like this quickly so I took my existing Delegate class, whose job it is to draw the list items and added a state for the most recently clicked tag. If drawing a host who was the clicked tag associated with it, draw it, then draw a gradient overlay over the item with just that tag’s details. This proved cumbersome for several reasons.

• You could only see one tag detail at a time. Some users wanted to see why HTTP failed and why ping failed so they could debug quicker (some tags obviously have some kind of relationship)
• The overlay cluttered the Situation Room. Even using a gradient with opacity muddled what was below it. There’s probably some way to achieve seeing the text clearly on top and the item below it but I didn’t find it in time.
• Some of the details were very long or multi line. This just doesn’t fit well on top of the item.

I knew there was a solution out there somewhere but none of these was it. So I sat back and decided to take a requirements point of view look at the problem. We needed to see multiple items’ details of multiple tags simultaneously, then I came back to the tooltip idea. Why not create a table of these values? It basically solves everything we need.

• The details won’t clutter up the normal view
• It will use the minimum possible space to show all the detail we need
• All items are right next to each other
• Item details have a lot more room and don’t have to compete with any other UI elements
• It would be fairly simple to implement

So I decided that if you hover over an item and not one of it’s tags , you get the details of all the tags

this naturally scales to multiple selected items

you can also see by the two screenshots above that the table will pivot depending on which list (tags vs hosts) is longer so it fits on the screen better.

I’m really happy how it all turned out, hopefully the users will like it too.

-chris