Add help icon in date field

(0) Share

Report

Posted on by MartinVargas

312

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

Categories:

Power Apps portals

I have the same question (0)

All responses (8)

Answers (0)

ragavanrajan 7,044 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
MartinVargas 312 on at

Like (0)

Report
Copy link

Link copied!

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:

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
MartinVargas 312 on at

Like (0)

Report
Copy link

Link copied!

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).

Was this reply helpful? Yes No
natalya 133 on at

Like (1)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Fubar 8,463 Super User 2026 Season 1 on at

Like (0)

Report
Copy link

Link copied!
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>');

Was this reply helpful? Yes No
MartinVargas 312 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No