Add help icon in date field

[MartinVargas]

Hello community, I am working with a portal in power apps. 

I'd like to put a help icon next to the Due Date field so the user knows the instructions for setting a date. In other words, once the user clicks on the help icon, a message box will be shown that says: Please enter a date greater than two days from the current one.

I need something like this:

Can someone help me here? 

I would appreciate it guys

[ragavanrajan]

Hi @MartinVargas 

You can try the following to enable the Tooltip for your field that will suffice your need. Below are the steps for you. 

1. Go to https://make.powerapps.com/ - choose your environment 

2. Under Data > Tables > choose the table 

3. Select "Forms" Tab > Choose your main form > Edit in new Tab 

4. You can see an option called "Switch to classic" 

5. Double click the field where you need tooltip/help text 

6. Under "Details" Tab > Click Edit > under "Description" > add your tooltip/help text 

7. Hit Save and close and click ok 

8. Remember to publish your form in classic mode. 

Once published > Click publish again in the design mode and close the form design 

------------
In Portal studio

1. Pres sync configuration and browse the website. And press "Ctrl+F5" 

Output: 

If you need customisation like what you described then it requires bit of customisation using jquery and CSS

Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

[MartinVargas]

Hello @ragavanrajan thank you very much. Implementing what it mentions to me, it happens that it does not show me the message that I declared.

These were the properties:

[ragavanrajan]

Hi @MartinVargas 

My apologies. Once you add the description. 

In Portal management: 

1. Under content > Basic Forms> Select your form 

2. Form options > Additional settings > Check "Tooltip Enabled" 

3. Hit Save and close 

------------
In Portal studio

1. Pres sync configuration and browse the website. And press "Ctrl+F5" 

Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

[MartinVargas]

Hi @ragavanrajan, as I can add an icon right next to Delivery Date, it happens that I want to show one like this:

So that at the time of clicking on this icon it shows the message I just implemented (Please enter a date greater than two days from the current one).

[NatGeo]

Hi @MartinVargas,

You have to do the following:

1. Go to https://make.powerapps.com/ - choose your environment 

2. Under Data > Tables > choose the table 

3. Choose Form you use

4. Select field

5. Locate to label

6. add the following after the label

<button type="button" class="lbx-lnk  lbx-modal glyphicon glyphicon-info-sign" tabindex="0" onclick="YOUR JS Script" style="cursor: pointer; background: none!important; border: none; padding-left: 2!important; color: #26374a;"></button>

7. Save

8. Publish

9. Go to portal

10. clear cache

11. you will see your icon

as for JS Script - it's a simple one that runs on click

Hoping it helps.

NatGeo

PS

I would not suggest to use descriptions of fields as tooltips, with functionality you are going to implement it's not worth it. You are not going to use it, I believe

[Fubar]

There are different ways to achieve it.  Personally I prefer to only use the hover text with the description as per Raga's earlier posts.

But, you can do something like the following in JQuery, where "webfileicon" is the name of a Web File that you have added the icon image to and "showyourmessage()" a JS function that your write to display/unhide your message.

// inside a document.onload

$('#thefieldname_label').append('<a id="someid1" onclick="showyourmessage();"style="margin-left: 5px;"><img id="someid2" src="/webfileicon" width="15" height="15";></a>');

[MartinVargas]

Hi @NatGeo your proposal helped me a lot. When clicking on this icon, how can I show a message box, similar to this:

[ragavanrajan]

Hi @MartinVargas 

If you are happy with the @NatGeo solution then please apply the border CSS for your message and appear like a message box in your custom CSS. 

I think applying CSS would be the simple solution.  

Alternatively, you can display the message box. Example below 

https://www.w3schools.com/howto/howto_js_alert.asp 

Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.