Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tooltip text for Fields in schema definition. #4669

Open
ezzle opened this issue Aug 2, 2024 · 12 comments
Open

Tooltip text for Fields in schema definition. #4669

ezzle opened this issue Aug 2, 2024 · 12 comments
Labels
enhancement

Comments

@ezzle
Copy link

ezzle commented Aug 2, 2024

The problem to solve

Apostrophe needs a simple tooltip system for displaying hints when hovering field name or label
Is your feature request related to a problem you are experiencing that is not a bug? Please describe.
No way to express a tooltip found. Maybe exists.

A clear and concise description of what the problem is. Ex: "When I do [some task], I find it frustrating when [something happens]." If this is a bug report (things are actually breaking), open a bug report instead.

Proposed solution

// FIELDS
....
myfield: {
        label: 'my field label',
        ...
        tooltip: 'Extensive text or method'
      }
....

Describe the solution you'd like

A clear and concise description of what you want to happen.

Alternatives

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered. For example, should this be done on the project level instead?

Additional context

Mention any other context or attach screenshots regarding the feature request.
Check the existing issue labels and add any you think are relevant, e.g.,
UI, UX, accessibility, security.
@boutell
Copy link
Member

boutell commented Aug 2, 2024

Certainly it is possible to build this. However, I'll point out that fields already have help and htmlHelp properties which can be used to display help after the schema field.

This is usually better from an accessibility perspective than a tooltip.

Can you expand on why a tooltip, a label and help are all necessary?

@ezzle
Copy link
Author

ezzle commented Aug 2, 2024 via email

@boutell
Copy link
Member

boutell commented Aug 4, 2024 via email

@boutell
Copy link
Member

boutell commented Aug 4, 2024 via email

@ezzle
Copy link
Author

ezzle commented Aug 13, 2024

I understand that you want tooltips, but I'm asking what the use case is for displaying that text as a tooltip, rather than the way our existing help property is displayed. It is a design conversation, in other words - how is this better for the user?
…
On Fri, Aug 2, 2024 at 5:24 PM Tshitshi Kia Ntoni @.> wrote: What I want is a help text displayed only when the mouse is on the field label or when clicked with an option to close. htmlHelp could be a good candidate. Unfortunately, I don't know how ? Additional question: may I use svg code with htmlHelp? The following html code does not work : '<a target=”_blank” href=” https://www.ezzle.io”>ezzle</a>' The generated link is http://localhost:3000/”https:/[www.ezzle.io”](http://www.ezzle.io%E2%80%9D) Best regards, Tshitshi Le ven. 2 août 2024 à 17:36, Tom Boutell @.> a écrit : > Certainly it is possible to build this. However, I'll point out that > fields already have help and htmlHelp properties which can be used to > display help after the schema field. > > This is usually better from an accessibility perspective than a tooltip. > > Can you expand on why a tooltip, a label and help are all necessary? > > — > Reply to this email directly, view it on GitHub > < #4669 (comment)>, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/ALX32WKEX464PWAUFIH7RW3ZPORONAVCNFSM6AAAAABL4S3C6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRVGY3DCNZUHE> > . > You are receiving this because you authored the thread.Message ID: > @.> > — Reply to this email directly, view it on GitHub <#4669 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAH27PPYXKL6JRQFWFSBITZPP2HBAVCNFSM6AAAAABL4S3C6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRWGE3DCMJWGI . You are receiving this because you commented.Message ID: @.>
-- THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

My use cases :

  1. Keep a more lean interface in case of a very Long text for help.
  2. No need to have the help text displayed on the screen, for senior content editor.

An option could be conditional display of help/htmlHelp.

@boutell
Copy link
Member

boutell commented Aug 13, 2024

cc our designer @stuartromanek for his take on the idea.

@ezzle
Copy link
Author

ezzle commented Aug 13, 2024

@stuartromanek

@stuartromanek
Hi.

What do you think about the idea of tooltip text option ?

Best regards

@stuartromanek
Copy link
Member

hey @ezzle .. I think it would be fine to implement a tooltip property to the field definition and have it reflected in the field UI like this:
image

If the tooltip option is passed

  • Append the info bubble icon to the end of the field label
  • Use the existing tooltip UI implementation and incorporate it into the field label

We would definitely help along a contribution PR if your willing to give it a go.

@ezzle
Copy link
Author

ezzle commented Aug 13, 2024 via email

@ezzle
Copy link
Author

ezzle commented Aug 13, 2024 via email

@stuartromanek
Copy link
Member

I believe the current tooltip implementation only accepts plain text as its label, so that is a constraint you'll have to work with.

You'll be adding the icon and tooltip component to modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue

Check out how a tooltip is implemented elsewhere in Apostrophe by looking at modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextModeAndSettings.vue

See how an icon is implemented using the AposIndicator component by looking at modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextTitle.vue

@ezzle
Copy link
Author

ezzle commented Aug 13, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@boutell @stuartromanek @ezzle