Tooltip text for Fields in schema definition.

[ezzle]

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]

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]

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” 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: ***@***.***>

[boutell]

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” 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

[boutell]

(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</a>' > 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 > > < > #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

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

[ezzle]

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]

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

[ezzle]

@stuartromanek

@stuartromanek
Hi.

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

Best regards

[stuartromanek]

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]

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 <#4669 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALX32WL6WM7FEPZLT53E77DZRINDHAVCNFSM6AAAAABL4S3C6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBWGQ3DGNZTHE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ezzle]

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 <#4669 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALX32WL6WM7FEPZLT53E77DZRINDHAVCNFSM6AAAAABL4S3C6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBWGQ3DGNZTHE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[stuartromanek]

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]

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 <#4669 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALX32WIOJVAUSPK6HFUAITTZRIUAPAVCNFSM6AAAAABL4S3C6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBWGU4TEMZVGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>