ERPNext Foundation ERPNext Cloud Chat Blog Discuss Frappé* Donate

Tooltip Suggestion

ui

#1

I have been heavily testing ERPNEXT V7, and I have to say I’m loving it so far. I love how easy it is and its intuitive design and its been smooth sailing.
However, once in awhile I have to go back to the manual to clarify some of the labels and what they are used for just to avoid the ambiguity of some of the labels.

My suggestion is that Labels should have tooltip, so when the user click or hover over the label it will show the tooltip explaining what the label mean (explanatory content or tips). These tooltip will be like an option for labels and they should be translatable.

There will be no change or distraction on the interface since the tooltip will only show up when the label text is clicked or hover on. In my opinion this will provide simplicity for new system users and also greatly help to provide explanation in case of custom fields


Tooltip / hoverover work around
#2

An out of the box solution could be the description field which you can edit in Setup>DocType. As far as I know there are no built in tooltips int ERPNext.

Here are some pictures that shows what it looks like:


#3

@cattmy What I’m talking about is little different. Look for example in the picture u posted. “Perm Level” label is quite ambiguous so when the user hover or click on it, it should give him more tips or explanation on what it means. thats the job of tooltip
For example:

here more takes you to about Perm Level in erpnext manual or to make the tooltip bigger to provide full explanation


#4

@ganas thanks! Feel free to put in a contribution :slight_smile:


#5

@rmehta I’ll give it a try I’ll start working on it soon


#6

The description field is nice, but I think a tooltip option in the frappe framework is nice. For example when creating custom doc types with many fields, it could get cumbersome to see a description under every field. Perhaps hovering or clicking the tooltip to show help if needed may make the interface less overwhelming. I am not sure how this would work in the mobile/app though.


#7

@jpp There are best practices guidelines for implementing tool-tips in browser for desktop and mobiles, even guides for implementing them with in mobile apps. I have been going through them to figure out the best practice that goes well with Frappe framework interface. Keep in mind that tooltip with in bootstrap is responsive so it adapt to the screen size . here are some of the best practises for tooltip:

  • Open via click, not hover
    -Tooltip should be fully visible when opened
  • Keep your info-tips short and sweet
    and lots of other guidelines

#8

My thoughts exactly!
I was waiting for someone to mention the mobile keyword. One of the things that I love about ERPNext is that the interface looks awesome and homogeneous in mobile browsers! +1 like from me for your last post ^ .


#9

I’m almost done implementing this feature even though I’m not developer whatsoever but the cleanness of Frappe team coding made it easy to follow. I am seeing if there is is any suggestions before contribute it

Here how it looks on my desktop
https://s4.postimg.org/hux43kzzx/Desktop.jpg
and here how it looks on my phone
https://s4.postimg.org/4gqfuyzwd/Mobile.jpg

and here you can specify the help information and the link for the help manual. its available for all fields and custom fields
https://s3.postimg.org/v49fzihcj/edit.jpg

basically when, you click on the label, if it has help information it will show up otherwise nothing happen. and if there is tooltip showing it hides as soon as you click or touch anywhere else.

Let me know what you think


#10

Looks really neat, I like it. Thank you.


#11

@ganas looks nice. You want to send a pull request?

@anand what do you think?


#12

@rmehta I sent a pull request :slight_smile:


#13

@ganas @rmehta I think we should merge tooltip and description into one and hide descriptions completely.

The cursor when hovered over label should be a question mark.

Mobile browsers account for hover state by making them clickable. And, most users will start using mobile browser for data entry only after some experience with ERPNext, so I don’t think there’s any need for providing a visual affordance like a ‘?’ symbol near the label. We can show the question symbol when the focus is on the input.


#14

Thanks for you inputs. Yeah your suggestion make complete sense.

  • Desktop: show “?” icon when hover or input field focus.
  • Mobile: show “?” when input field get focus.

I’ll look into that


#15

Is there any update on this? I would love this feature.


#16

@jpp Thanks for reminding me (I’ve memory of golden fish lol) any way I edited as anand suggested and put a pull request so it’s up to the team If they wanna add it to the framework
here the pul request
https://github.com/frappe/frappe/pull/2030


#17

@ganas: This is a very valuable contribution. Very helpful and beautiful done.
I was dissapointed to read this in the corresonding github issue:

from @rmehta in guthub: @aboganas: Sorry we missed this. My personal take is that too much information is not good for the user. The UX needs to be clean enough so that we don’t need additional tooltips.
Should I close this?

I agree that a UI should be clean, but not that too much information is not good for the user! The more inforation the better. Erpnext is an excellent product, but lacks severely in documentation, and tooltips for every field can help tremendously.

As this software is already written and it looks good, why not implementing it? The filling in of the tooltips with relevant help texts, can be a task in which the community could help.