Tooltip text for Fields in schema definition.

apostrophecms / apostrophe

A full-featured, open-source content management framework built with Node.js that empowers organizations by combining in-context editing and headless architecture in a full-stack JS environment.

https://apostrophecms.com

MIT License

4.34k stars 591 forks source link

Tooltip text for Fields in schema definition. #4669

Open ezzle opened 1 month ago

ezzle commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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' The generated link is http://localhost:3000/”https:/www.ezzle.io”

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 https://github.com/apostrophecms/apostrophe/issues/4669#issuecomment-2265661749, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALX32WKEX464PWAUFIH7RW3ZPORONAVCNFSM6AAAAABL4S3C6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRVGY3DCNZUHE . You are receiving this because you authored the thread.Message ID: @.***>

boutell commented 1 month ago

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' The generated link is http://localhost:3000/”https:/www.ezzle.io”

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 < https://github.com/apostrophecms/apostrophe/issues/4669#issuecomment-2265661749>,

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 https://github.com/apostrophecms/apostrophe/issues/4669#issuecomment-2266161162, 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

boutell commented 1 month ago

(htmlHelp is intended for simple HTML, e.g. including some links in the help text. Otherwise it is like the regular help property. It is not supposed to be a workaround to achieve tooltips)

On Sun, Aug 4, 2024 at 2:07 PM Tom Boutell @.***> wrote:

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' The generated link is http://localhost:3000/”https:/www.ezzle.io”

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 < https://github.com/apostrophecms/apostrophe/issues/4669#issuecomment-2265661749>,

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 https://github.com/apostrophecms/apostrophe/issues/4669#issuecomment-2266161162, 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

THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

ezzle commented 1 month ago

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 :

Keep a more lean interface in case of a very Long text for help.
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 commented 1 month ago

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

ezzle commented 1 month ago

@stuartromanek

@stuartromanek Hi.

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

Best regards

stuartromanek commented 1 month ago

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:

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 commented 1 month ago

Thank you. I will give it a go. Please tell me how.

Best regards,

tshitshi

Le mar. 13 août 2024 à 16:56, Stuart Romanek @.***> a écrit :

hey @ezzle https://github.com/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.png (view on web) https://github.com/user-attachments/assets/9fb8b994-9bd7-43b8-9f64-10d8ffaa34c8

If the tooltip option is passed

Append the info bubble icon https://pictogrammers.com/library/mdi/icon/information-outline/ 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.

— Reply to this email directly, view it on GitHub https://github.com/apostrophecms/apostrophe/issues/4669#issuecomment-2286463739, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALX32WL6WM7FEPZLT53E77DZRINDHAVCNFSM6AAAAABL4S3C6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBWGQ3DGNZTHE . You are receiving this because you were mentioned.Message ID: @.***>

ezzle commented 1 month ago

with an alternative plain/html text will be nicer.

Le mar. 13 août 2024 à 16:56, Stuart Romanek @.***> a écrit :

hey @ezzle https://github.com/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.png (view on web) https://github.com/user-attachments/assets/9fb8b994-9bd7-43b8-9f64-10d8ffaa34c8

If the tooltip option is passed

Append the info bubble icon https://pictogrammers.com/library/mdi/icon/information-outline/ 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.

— Reply to this email directly, view it on GitHub https://github.com/apostrophecms/apostrophe/issues/4669#issuecomment-2286463739, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALX32WL6WM7FEPZLT53E77DZRINDHAVCNFSM6AAAAABL4S3C6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBWGQ3DGNZTHE . You are receiving this because you were mentioned.Message ID: @.***>

stuartromanek commented 1 month ago

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 commented 1 month ago

Thank you. I will try.

Best regards,

Tshitshi

Le mar. 13 août 2024 à 17:55, Stuart Romanek @.***> a écrit :

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 @.***/schema/ui/apos/components/AposInputWrapper.vue

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

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

— Reply to this email directly, view it on GitHub https://github.com/apostrophecms/apostrophe/issues/4669#issuecomment-2286592351, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALX32WIOJVAUSPK6HFUAITTZRIUAPAVCNFSM6AAAAABL4S3C6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBWGU4TEMZVGE . You are receiving this because you were mentioned.Message ID: @.***>