Advice on configurable tool-tip text

[PortalNewbie]

Hi,

I am trying to make the tool-tip text configurable, so the user can change the tool-tip text as and when they want to without having to make changes at the back-end. I have implemented a solution, but wanted the experts in this forum to vet this and let me know if there is a more elegant way of doing this.
Step 1 - I created a table called Portal Tooltip Help, and created fields 'Key', 'Value', Key is a unique identifier (pagename/fieldname) and 'Value' is the tool-tip text. 

Step 2 - Expose the above table via WebApi

Step 3 - On the webform step javascript, iterate through all the fields on the form and fetch tool-tip text from the above table. If tool-tip text is found, push it to the field.

See attached screenshot of the code. 

My question is - have I over-engineered the solution, or is there a simpler way of doing this? Can this be done using content snippets as well ?

[chleverenz]

Hi @PortalNewbie ,

this is not a bad solution. If you really need tooltips, you can to it like that.

You could speed up if you select all needed tooltips at once by a dedicated webtemplate which renders json. This webtemplate could also use snippets so that you would be multilingual.

Nevertheless, in one of my last projects i used a diffrent approach for tooltips: in forms, you can add helptexts to the fields in the metadata. These texts will be multilingual if needed. You can choose, whether the helptexts are the texts from the dataverse or individual texts and you can render them in various places around the field (i used below the field, as these are good selectable 🙂 ).

Now the trick: i select the helptexts via the dom and grab the innertext from them and use the texts as tooltips for the corrsponding field (we used also individual code for the tooltipping). The helptexts on the form are hidden by a styleclass which has a display: none . When you configure one helptext for one of your fields, you will see the result immediately and get the idea 🙂

When you do it like this, you speed up the process as you do not have to select the texts via a callback to the server (which also costs accesses to the backend...)

There is one ugly thing about metadata: the metadata is bound to forms. If you have the same field on multiple forms and need tooltips for them, you would have to duplicate your metadata.

Sidejoke: in order to overcome this, we created a textentity like yours, parse the forms and put all tooltips as helptexts in the metadata, where the corresponding field is used...

Hope this helps and is readable,

  Christian

PS if you have more questions, do not hesitate to ask , as it was a customerproject io can not share code, but i could guide some ideas 🙂

[Fubar]

I would be more inclined to do something server-side to create a JavaScript or JSON object containing the key/value (and then use that object after the page has rendered to populate the help text) rather than make a Web API call.  The reason for this is that it is less likely the user will notice the delay of the Web API call e.g.

1. (server-side) Web Template constructs the HTML etc of the Web Page, then (client-side) Web Page renders in browser, API Call made, wait for response, if successful populate help text, vs
2. (server-side) Web Template constructs the HTML etc of the Web Page including the Population of a JS or JSON Object via Liquid, then (client-side) Web Page renders in browser, populate help text.

in #1 if the API response is slow then the user can see something rendered on the screen whilst you are still waiting for the API response vs in #2 any slowness occurs before the user sees the Web Page rendered.

[PortalNewbie]

Hi Christian,
Thank you for your suggestion to use the Description attribute of the field metadata to put the help text. This is especially helpful as some of the help text is too long to display on the tool-tip. We can also use HTML formatting in the description to make it more presentable. However, this causes another issue. The description field stays open at all times, which uses a lot of real-estate on the form, specially when you have long description for multiple fields.

Is there a way to dynamically show/hide the description field? E.g. I could have a '?' or '!' icon next to the field label and on click of the icon, show the description field (either for a few seconds, or with a 'X' to close the description ? 

[PortalNewbie]

Thank you @Fubar for your suggestion. I created a web template to return a json (via Liquid) of all the values of the config table, and on the webform step, I called the web page using the ajax GET function. Then I iterate through the json array to get the value I need. Is this what you were suggesting? 

[chleverenz]

Hi @PortalNewbie ,

as far as i know, there is no out-of-the-box feature to dynamically show/hide the helptexts. We added some scripting and addad an icon after the field which toggled the visibility of the specific div where the information is shown.

If you look in the dom, you will immediately see where it is rendered to and how to show/hide it.

Please do not forget, that some users are on mobile devices without a mouse, so, click alone might not do the job 🙂

Another idea, if i may: you could also set a placeholder attribute to the inputs which a short explaining word/sentence (like "your home phonennumber"). The placeholder is a standard html and will vanish when data is entered. This is superuserfriendly and standrd html. Problem (what would the world be without them, 🙂 😞 not all elements support placeholders: listboxes have for example no placeholder...

All this stuff alters the dom of course and might be unsupported... (but we use it a lot 🙂 )

Have fun,

  Christian

[PortalNewbie]

Hi @chleverenz how do you add an icon after the field ? I am not very well-versed with DOM manipulation. I was able to toggle the visibility of the help text on click of the field label, but an icon would be preferred. 

Regarding the actual help text, what's the best way to store the formatted text in a way that it is easily updateable ? I added the HTML code directly to the field's metadata Description as a div with ID. Is that the right approach, or should I add it to a content snippet ? If I add it as a content snippet, how do I show/hide the content snippet ?