Project

General

Profile

Feature #36607

mgr/dashboard: Display description on mouse hover

Added by Ranjitha G about 2 years ago. Updated 4 months ago.

Status:
Resolved
Priority:
Normal
Assignee:
Category:
dashboard/general
Target version:
% Done:

0%

Source:
Community (dev)
Tags:
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 Resolved
Related to mgr - Documentation #46415: mgr/dashboard: Create new chapter about the Dashboard's landing page Resolved

History

#1 Updated by Greg Farnum about 2 years ago

  • Project changed from Ceph to mgr

#2 Updated by Lenz Grimmer about 2 years 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 almost 2 years 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 almost 2 years 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 almost 2 years ago

#6 Updated by Ju Lim almost 2 years 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 almost 2 years ago

  • Description updated (diff)
  • Tags set to usability

#8 Updated by Lenz Grimmer almost 2 years ago

  • Description updated (diff)

#9 Updated by Dan Guo almost 2 years 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.

#10 Updated by Lenz Grimmer 7 months ago

  • Assignee set to Ishan Rai

#11 Updated by Lenz Grimmer 7 months ago

  • Related to Documentation #46415: mgr/dashboard: Create new chapter about the Dashboard's landing page added

#12 Updated by Lenz Grimmer 7 months ago

  • Tags set to usability, management
  • Status changed from New to In Progress
  • Tags deleted (usability)
  • Pull request ID set to 35956

Per our discussion during today's standup, the popovers above each section should only contain one short paragraph that describes the widgets visible in that section on a high level. Once #46415 has been implemented, a link pointing to this chapter in the documentation could be added for a more detailed explanation of each widget.

#13 Updated by Lenz Grimmer 4 months ago

  • Status changed from In Progress to Resolved
  • Target version set to v16.0.0

Also available in: Atom PDF