Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Adaptive forms: Inline long description help text

Avatar

Avatar
Validate 10
Level 2
chandran8596539
Level 2

Like

1 like

Total Posts

39 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
View profile

Avatar
Validate 10
Level 2
chandran8596539
Level 2

Like

1 like

Total Posts

39 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
View profile
chandran8596539
Level 2

06-02-2018

We have a requirement to implement the inline tool tip. Is these any OOTB to implement this in adaptive forms. Below is the screen shot for the reference, how it should look like. Thanks in advance.

Regards,

Chandra

Inline_Help_Text.png

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile
James_R_Green
Level 5

06-02-2018

Hi chandran85965395

You can use the long description with inline styles or the theme editor to set the css of the message to your requirements:

Inline CSS properties for adaptive form components

Adobe Experience Manager Help | Themes in AEM Forms

They are pretty intuitive - go to the edit dropdown in the top right and change to style, then click on the textbox or other widget, then long description. Change something obvious like the text colour to get a feel for it.

Use the theme editor if you want to apply the same look and feel across more than one form and then override it on a form by form basis with inline styles if you need to.

Answers (5)

Answers (5)

Avatar

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile
James_R_Green
Level 5

06-02-2018

Hi chandran85965395

That's where the CSS comes in to play, look at the help icon in inspector it sets:

  1.    position: absolute;
  2.    top: 8px;
  3.    right: 8px;

to position the help (?) icon above the field, if you try styling with the theme editor, or inline styles as described in the links in my previous comment you can get a similar effect.

I tried:

  1.    position: absolute;
  2.    top: -30px;
  3.    right: 50px;

And got the following.

working.png

Of course you will need to tweak to make sure it plays well with other items on the page, but should be enough to get you started. Screenshots of my setup below:

selecting_style.png

position_absolute.png

advanced.png

Avatar

Avatar
Boost 5
Level 2
jagjeetthukral
Level 2

Likes

7 likes

Total Posts

36 posts

Correct Reply

4 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 3
View profile

Avatar
Boost 5
Level 2
jagjeetthukral
Level 2

Likes

7 likes

Total Posts

36 posts

Correct Reply

4 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 3
View profile
jagjeetthukral
Level 2

11-02-2018

chandran85965395​  you need to add display:none to the selector ".guideFieldDescription.long" which is the parent to the cross button.

You can do this by creating a client lib, creating a js file this code and add it as a dependency in your Adaptive form.

Hope this helps !!!

Cheers,

Jagjeet Singh

AEM Forms Blog

Avatar

Avatar
Validate 10
Level 2
chandran8596539
Level 2

Like

1 like

Total Posts

39 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
View profile

Avatar
Validate 10
Level 2
chandran8596539
Level 2

Like

1 like

Total Posts

39 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
View profile
chandran8596539
Level 2

08-02-2018

Thank you very much James, It helped me a lot.  Am able to it now .  But still have one more problem, If I click in 'x' it close the popup. Can you help me here.

Thanks in advance.

Capture.PNG

Avatar

Avatar
Validate 10
Level 2
chandran8596539
Level 2

Like

1 like

Total Posts

39 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
View profile

Avatar
Validate 10
Level 2
chandran8596539
Level 2

Like

1 like

Total Posts

39 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
View profile
chandran8596539
Level 2

06-02-2018

Thanks James and smacdonald2008​.

I added the Long description and help icon, but our issue is help text is coming after the field. We are looking as a popup as I shown in my previous screen shot. Just looking if there is any easy way to implement that solution.

Thanks,

Chandra

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

06-02-2018

Great suggestion James!