Feature Request: Title Tooltip Field #4079

Closed
kylebrandt opened this Issue Feb 19, 2016 · 43 comments

Comments

Projects
None yet
10 participants
@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:

image

Maybe there is a better way that I am missing?

@utkarshcmu

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Feb 19, 2016

Contributor

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]

Contributor

utkarshcmu commented Feb 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Feb 19, 2016

Contributor

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

Contributor

utkarshcmu commented Feb 19, 2016

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

@kylebrandt

This comment has been minimized.

Show comment
Hide comment
@kylebrandt

kylebrandt Feb 19, 2016

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

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

@utkarshcmu

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Feb 19, 2016

Contributor

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].

Contributor

utkarshcmu commented Feb 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@kylebrandt

kylebrandt Feb 19, 2016

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?

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

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Feb 19, 2016

Contributor

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. :)

Contributor

utkarshcmu commented Feb 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@kylebrandt

kylebrandt Feb 19, 2016

@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.

@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

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Feb 29, 2016

Contributor

@torkelo

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

Contributor

utkarshcmu commented Feb 29, 2016

@torkelo

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

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Mar 1, 2016

Member

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

Member

torkelo commented Mar 1, 2016

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

@utkarshcmu

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Mar 1, 2016

Contributor

@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. :)

Contributor

utkarshcmu commented Mar 1, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Mar 1, 2016

Member

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 )

Member

torkelo commented Mar 1, 2016

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 comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Mar 2, 2016

Contributor

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

screen shot 2016-03-01 at 11 09 28 pm

screen shot 2016-03-01 at 11 09 13 pm

Any feedback?

Contributor

utkarshcmu commented Mar 2, 2016

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

screen shot 2016-03-01 at 11 09 28 pm

screen shot 2016-03-01 at 11 09 13 pm

Any feedback?

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Mar 2, 2016

Member

@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.

Member

torkelo commented Mar 2, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Mar 2, 2016

Member

@mattttt thoughts ^

Member

torkelo commented Mar 2, 2016

@mattttt thoughts ^

@utkarshcmu

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Mar 2, 2016

Contributor

This is a screenshot with a help text of 208 characters.
screen shot 2016-03-02 at 12 56 35 am

Character count = 332
screen shot 2016-03-02 at 1 00 40 am

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.

Contributor

utkarshcmu commented Mar 2, 2016

This is a screenshot with a help text of 208 characters.
screen shot 2016-03-02 at 12 56 35 am

Character count = 332
screen shot 2016-03-02 at 1 00 40 am

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

This comment has been minimized.

Show comment
Hide comment
@mattttt

mattttt Mar 2, 2016

Contributor

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.

Contributor

mattttt commented Mar 2, 2016

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

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Mar 18, 2016

Contributor

@mattttt Any updates on this?

Contributor

utkarshcmu commented Mar 18, 2016

@mattttt Any updates on this?

@sbengo

This comment has been minimized.

Show comment
Hide comment
@sbengo

sbengo Apr 11, 2016

Contributor

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

Contributor

sbengo commented Apr 11, 2016

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

@toni-moreno

This comment has been minimized.

Show comment
Hide comment
@toni-moreno

toni-moreno Apr 12, 2016

Contributor

👍

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.

Contributor

toni-moreno commented Apr 12, 2016

👍

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

This comment has been minimized.

Show comment
Hide comment
@dutchiechris

dutchiechris Apr 29, 2016

+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.

+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

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Apr 29, 2016

Contributor

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. :)

Contributor

utkarshcmu commented Apr 29, 2016

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

This comment has been minimized.

Show comment
Hide comment
@merwy

merwy May 30, 2016

+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!

merwy commented May 30, 2016

+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

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Jun 8, 2016

Contributor

@mattttt Any update on this issue / PR #4224

Contributor

utkarshcmu commented Jun 8, 2016

@mattttt Any update on this issue / PR #4224

@utkarshcmu

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Jun 21, 2016

Contributor

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

Contributor

utkarshcmu commented Jun 21, 2016

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

@torkelo torkelo referenced this issue Jun 25, 2016

Closed

Optionally add captions for metrics #5416

1 of 3 tasks complete
@mattttt

This comment has been minimized.

Show comment
Hide comment
@mattttt

mattttt Dec 5, 2016

Contributor

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.

👍

Contributor

mattttt commented Dec 5, 2016

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

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Dec 5, 2016

Contributor

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

Contributor

utkarshcmu commented Dec 5, 2016

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

@bergquist bergquist added this to the 4.1.0 milestone Dec 6, 2016

@utkarshcmu

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Dec 6, 2016

Contributor

Screenshot:

screen shot 2016-12-06 at 3 54 02 am

Contributor

utkarshcmu commented Dec 6, 2016

Screenshot:

screen shot 2016-12-06 at 3 54 02 am

@bergquist bergquist removed their assignment Dec 14, 2016

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Dec 14, 2016

Member

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.
image

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?

image

Member

torkelo commented Dec 14, 2016

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.
image

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?

image

@utkarshcmu

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Dec 14, 2016

Contributor

@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.

Contributor

utkarshcmu commented Dec 14, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Dec 14, 2016

Member

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

Member

torkelo commented Dec 14, 2016

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

torkelo added a commit that referenced this issue Dec 16, 2016

feat(panel): working on panel help text and unifying panel links, pan…
…el errors, and panel help into a single panel feature, #4079 , #6847

torkelo added a commit that referenced this issue Dec 16, 2016

feat(panel): working on panel help text and unifying panel links, pan…
…el errors, and panel help into a single panel feature, #4079 , #6847
@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Dec 16, 2016

Member

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.

panel_desc

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

Member

torkelo commented Dec 16, 2016

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.

panel_desc

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

@torkelo torkelo closed this in #6847 Dec 16, 2016

@utkarshcmu

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Dec 16, 2016

Contributor

@torkelo This looks great! 👍🏽

Contributor

utkarshcmu commented Dec 16, 2016

@torkelo This looks great! 👍🏽

@dutchiechris

This comment has been minimized.

Show comment
Hide comment
@dutchiechris

dutchiechris Dec 17, 2016

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?

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

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Dec 18, 2016

Contributor

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.

screen shot 2016-12-18 at 3 03 45 pm

Contributor

utkarshcmu commented Dec 18, 2016

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.

screen shot 2016-12-18 at 3 03 45 pm

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Dec 19, 2016

Member

@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?

Member

torkelo commented Dec 19, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@dutchiechris

dutchiechris Dec 19, 2016

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:

image

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

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:

image

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

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Dec 19, 2016

Member

@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)

Member

torkelo commented Dec 19, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Dec 19, 2016

Contributor

@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. 👍

Contributor

utkarshcmu commented Dec 19, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Dec 19, 2016

Member

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

Member

torkelo commented Dec 19, 2016

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

@mattttt

This comment has been minimized.

Show comment
Hide comment
@mattttt

mattttt Dec 19, 2016

Contributor

@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.

Contributor

mattttt commented Dec 19, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@kylebrandt

kylebrandt Dec 19, 2016

@utkarshcmu

This comment has been minimized.

Show comment
Hide comment
@utkarshcmu

utkarshcmu Dec 19, 2016

Contributor

Agreed with @mattttt 👍

Contributor

utkarshcmu commented Dec 19, 2016

Agreed with @mattttt 👍

bergquist added a commit that referenced this issue Dec 20, 2016

@liujin1993

This comment has been minimized.

Show comment
Hide comment
@liujin1993

liujin1993 Jan 10, 2018

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment