Feature Request: Title Tooltip Field

[kylebrandt]

I would find it useful to have a field for text that would display as a tooltip when hovering over the title of graph panel.

My use case is that in bosun each metric has a description field. Those descriptions give more information about the metric. These can be long, so there doesn't seem to be a current space on grafana dashboards for this. The best I have come up with for a workaround is to create a drill down link that has no link value (Just a lot of text for the title). Which is a little silly and ends up looking like this:

Maybe there is a better way that I am missing?

[utkarshcmu]

Check this out for screenshots : #1505
The work was done here in this PR : #3691
But it was not merged into Grafana master in favor of #1168

Still if you want tooltip with Title as shown in #1505 , its available here [https://github.com/justforkit/grafana]

[utkarshcmu]

Anyway, thanks for the great work in Bosun. It is very useful. 👍

[kylebrandt]

Hmm... So the one that was merged isn't collapsed by default?

[utkarshcmu]

Sorry, I did not understand your question. #3691 was never merged and was rejected in Grafana master. #3691 is merged in my fork [https://github.com/justforkit/grafana].

[kylebrandt]

I meant the notes in #1168 - seems like the notes are not collapsed based on your comment, so with lots of graphs or long notes it gets messy?

[utkarshcmu]

Yes it will get somewhat messy, but according to @torkelo in #1505 , the panel notes/info should be visible all the time. Anyway, I am still completely in favor of something hidden and which only shows up on the dashboard when needed (either by hovered tooltip or collapsed notes). Dashboard space is precious for my use case at least. :)

[kylebrandt]

@torkelo Request for reconsideration on

Having panel description text that only appear on mouse over (like tooltip) is not something that feels like a good idea. If the information is important then it should be visibile all the time.

The reason is because there are two different user stories here:

1. Focused dashboards with important curated graphs. In this scenario, I think you are correct. You don't want to hide important information that is essential to interpreting the visualization.
2. Many graph dashboards: In this scenario, there are many graphs (say, row X columns = 6x6). In this case, I'm basically visually looking for things that seem anomalous. Once I see those things, I then want more information about the metric / panel. Always having the notes displayed reduces the number of panels I can have on my screen for this sort of thing overview and makes it harder to read. To me this is kind of like having the legend always displayed or not.

[utkarshcmu]

@torkelo

Would you like to reconsider #1505 & #3691 as you labeled this issue as "help wanted"?

[torkelo]

Yes, but need to use new drop component instead of the normal tooltip

[utkarshcmu]

@torkelo - Can you please give me an example from the code where this new drop component is used? Also, if you can briefly describe how you want the dropdown of this help text. Just wanted to make sure whats your vision before starting any work on this. :)

[torkelo]

the new tooltip / popover component is used by annotations and the help popover (used in data source edit view, when you focus datasource name or http url inputs )

[utkarshcmu]

This help text is optional. It will show up "i" icon only when there is any help text otherwise not.

Any feedback?

[torkelo]

@utkarshcmu looks good, how does it handle out of bounds scenarios (long text on panel close to right edge of viewport). Currently css for the help popover is that is gets hidden when out of bounds, the drop component also supports moving attachment position when out of bounds, but due to the current css for the help popover this is disabled as it is hidden.

[torkelo]

@mattttt thoughts ^

[utkarshcmu]

This is a screenshot with a help text of 208 characters.

Character count = 332

IMO this serves the basic purpose of help text. If the help text is too long, i.e. more than 200-300 characters then that information is too verbose.

[mattttt]

Not near wifi at the moment, will look later tonight or worst case tomorrow.

On Mar 2, 2016, at 5:04 PM, Torkel Ödegaard notifications@github.com wrote:

@mattttt thoughts ^

—
Reply to this email directly or view it on GitHub.

[utkarshcmu]

@mattttt Any updates on this?

[sbengo]

+1! Would be awesome to add info about shown metrics for the final user!

[toni-moreno]

👍

We need this PR to show a good description on the metrics shown to users.

We have had lots of misunderstanding issues with users that can not understand what they are watching in some panels.

[dutchiechris]

+1 I have a set of default dashboards as part of NetApp storage monitoring integration and users often don't understand exactly what they are looking at, and since I am not their colleague I can't easily answer! A help field would help the user greatly and as the native/default dashboard feature of Grafana becomes more used it is helpful there too.

[utkarshcmu]

If this can become part of 3.0.0 , it would be awesome. This will be so helpful for the viewers to understand the graphs without taking any extra space on the dashboard. :)

[merwy]

+1 I would really need panel tooltips on my dashboards as I have some specific and tricky panels which need some additional explanation about what exactly they present. Looking forward for this feature!

[utkarshcmu]

@mattttt Any update on this issue / PR #4224

[utkarshcmu]

@torkelo / @bergquist I think this functionality is needed by many. Can you guys take a look at #4224 ?

[mattttt]

I very much like the revised tool tip, but because space conflicts with the drill down, it'll need a bit more thought.

That said, because this entire row header needs a re-think, I'm inclined to approve this design right now (with the expectation that few panels will have both info and drilldown) while we focus on refactoring to support new features/functionality.

👍

[utkarshcmu]

Thanks @mattttt , will redo the PR #4224 asap!

[utkarshcmu]

Screenshot:

[torkelo]

Made progress on refactoring PR #6847

Tried to improve layout for panel general tab to fit a text area for panel description (help text). Want text area as I would like to support markdown there instead of sanitizing html.

The thing that needs some thought is how to present this icon, right now we have 3 different icons next to panel title. Is there a way to organize them better (all before or after title for example, seperator?). @mattttt any thoughts?

[utkarshcmu]

@torkelo / @matt One way to not have the "circle-i" icon is to display description when a user hovers over the Panel title but I am not sure if that is ideal or if we need an extra icon to show description.

[torkelo]

I think the icon is important to signal that there is a panel description there

[torkelo]

Made some good progress on this, trying to unify panel drilldown links and panel description text into the same area, the same are used for error info as well.

For full video where I talk through it:
http://grafana.org/assets/videos/panel_description.mp4

[utkarshcmu]

@torkelo This looks great! 👍🏽

[dutchiechris]

I loaded grafana:master from docker (commit: 0a0b4f5 shown on login page) to check out this feature and added a data source and panel with valid metric, and then added a description on the edit:general tab and I don't get any info icon in the corner. I saved, reloaded, tried in Firefox and Chrome, and verified it's in the json response, but didn't see it yet. Any ideas?

[utkarshcmu]

In the current master I see the description but the corner is without the blue background which is harder to spot. So, either we make the background blue of the corner or make the "i" whiter or bolder.

[torkelo]

@utkarshcmu yea, we wanted to tone it down a bit so it was not as attention grabbing. Do you think it's too hard to spot?

[dutchiechris]

I fetched again from Docker hub [ Grafana v4.1.0-pre1 (commit: 090db94) ] which looks like the most recent commit from this morning and still I see nothing after adding some help text:

Ideas? Should this feature be visible in the docker builds?

[torkelo]

@dutchiechris thanks for the heads up, looks like there is an issue with the css and minification which makes the panel help icon not show up (in the optimized build)

[utkarshcmu]

@torkelo Thats a good question whether the description should catch attention or not. Some users might want the "i" to be more brighter and some dimmer. Right now as a user its somewhat hard to spot it as its dimmer but I think either lets keep it this way or make it a bit(not much) brighter.

But this looks great, it will help a lot of users to know what information is exactly displayed in the panel. 👍

[torkelo]

@dutchiechris I fixed the css minification issue, next grafana/grafana:master docker image should have it working

[mattttt]

@utkarshcmu: Keep us posted as you use it, but as dashboards are all about information priority, we want to make sure we dont have everything competing for attention. We can play with some shades of grey, but once the user learns it, I think it's appropriately clear.

[kylebrandt]

FWIW (haven't tried the branch yet) but I was thinking about the ability to have different icons, i.e. (exclamation, question mark) that dashboard authors could choose. However, that will make authors have to decide which is correct when, and the idea was less appealing to me - but figured I throw it out there.

…

On Mon, Dec 19, 2016 at 10:49 AM, Matt Toback ***@***.***> wrote: @utkarshcmu <https://github.com/utkarshcmu>: Keep us posted as you use it, but as dashboards are all about information priority, we want to make sure we dont have everything competing for attention. We can play with some shades of grey, but once the user learns it, I think it's appropriately clear. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#4079 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABnT0KUIyAQBijUG99zCUKaX6lUaeXO3ks5rJqeHgaJpZM4HeBFv> .

[utkarshcmu]

Agreed with @mattttt 👍

[liujin1993]

@torkelo Which css file controls the panel help tooltip？I want to modify it to satisfy ourselves need.