Project

General

Profile

Feature #36607

mgr/dashboard: Display description on mouse hover

Added by Ranjitha G 12 months ago. Updated 7 months ago.

Status:
New
Priority:
Normal
Assignee:
-
Category:
dashboard/general
Target version:
-
Start date:
10/28/2018
Due date:
% Done:

0%

Source:
Community (dev)
Tags:
usability
Backport:
Reviewed:
Affected Versions:
Pull request ID:

Description

In ceph dashboard, it would be very helpful to display description(or doc link) of the UI blocks, when mouse hovers. This will be useful for the beginners.

description.PNG View (81.2 KB) Dan Guo, 02/27/2019 11:20 AM

new.PNG View (84.5 KB) Dan Guo, 03/12/2019 10:40 AM


Related issues

Related to mgr - Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feel New 08/24/2018

History

#1 Updated by Greg Farnum 12 months ago

  • Project changed from Ceph to mgr

#2 Updated by Lenz Grimmer 12 months ago

  • Subject changed from In ceph dashboard add description on mouse hover to mgr/dashboard: Display description on mouse hover
  • Category set to dashboard/general

#3 Updated by Lenz Grimmer 8 months ago

  • Related to Feature #27218: mgr/dashboard: Style guide to give a the UI an overall look and feel added

#4 Updated by Dan Guo 8 months ago

Hi, I implemented this feature with popover, Pls see the attachment for screenshot.
The popover will show when your mouse over the info-icon, and hide when mouse leave.

#5 Updated by Dan Guo 8 months ago

#6 Updated by Ju Lim 7 months ago

It seems like we’re trying to show an infotip — denoted by the information icon — on a per dashboard card. If so, it’s preferable that the “i” (info icon) appear right after the card label (vs. the top far right). The help text is displayed in a popover when the user clicks on the information icon. While popovers are recommended, you can use tooltips if it is preferred to have the information appear on hover.

We should limit the use of the info icon to avoid overwhelming the user — meaning, if we’re not giving any additional useful information in the infotip/tooltip, let’s not show the info icon for the card. Ideally, if the label or what is shown is not clear, we should change the card label or what is shown to make clear to the user what is being displayed.

If having the info icon on every card becomes too “noisy” in terms of visual clutter, another option to consider is to put the info icon at the end of the section/group title, i.e. Status, Performance, and Capacity.

#7 Updated by Lenz Grimmer 7 months ago

  • Description updated (diff)
  • Tags set to usability

#8 Updated by Lenz Grimmer 7 months ago

  • Description updated (diff)

#9 Updated by Dan Guo 7 months ago

Ju Lim wrote:

It seems like we’re trying to show an infotip — denoted by the information icon — on a per dashboard card. If so, it’s preferable that the “i” (info icon) appear right after the card label (vs. the top far right). The help text is displayed in a popover when the user clicks on the information icon. While popovers are recommended, you can use tooltips if it is preferred to have the information appear on hover.

We should limit the use of the info icon to avoid overwhelming the user — meaning, if we’re not giving any additional useful information in the infotip/tooltip, let’s not show the info icon for the card. Ideally, if the label or what is shown is not clear, we should change the card label or what is shown to make clear to the user what is being displayed.

If having the info icon on every card becomes too “noisy” in terms of visual clutter, another option to consider is to put the info icon at the end of the section/group title, i.e. Status, Performance, and Capacity.

Thanks for your advise. I have changed my solution as the way to show a tooltip when mouse hovers on a info-card-title and show a popover when you click the info-icon right by the group-title. Pls see my new attach, and I am very happy to hear from you again.

Also available in: Atom PDF