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

fieldDescription property is not appearing in proper alignment?

Avatar

Avatar
Validate 10
Level 3
RashidJorvee
Level 3

Likes

28 likes

Total Posts

54 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
RashidJorvee
Level 3

Likes

28 likes

Total Posts

54 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
RashidJorvee
Level 3

21-05-2018

Hi Guys,

I am adding fieldDescription property for a textbox, when I mouseover on that tooltip, textbox description message is not appearing in proper alignment and appearing on full width of page. In HTML snippet it is creating own tooltip div with height and width. Could you please suggest what I have to do in this so it appear in proper fixed layout which is default for tooltip?

1492314_pastedImage_0.png

Thanks!

Rashid

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 10
Level 3
RashidJorvee
Level 3

Likes

28 likes

Total Posts

54 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
RashidJorvee
Level 3

Likes

28 likes

Total Posts

54 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
RashidJorvee
Level 3

23-05-2018

Thank you!!

I have done this by extending the following CSS class.

.

Answers (4)

Answers (4)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,260 likes

Total Posts

3,149 posts

Correct Reply

886 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,260 likes

Total Posts

3,149 posts

Correct Reply

886 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

23-05-2018

Hi Rashid,

Anyways you can write your own CSS rule for tooltip. but this will be a global change unless you don't have specific CSS selectors.

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,260 likes

Total Posts

3,149 posts

Correct Reply

886 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,260 likes

Total Posts

3,149 posts

Correct Reply

886 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

22-05-2018

Hi Rashid,

The above Text field description is the default behivour. I am wondering how you are creating tooltip for your radio which is full width.If you are using javascript to create tooltip for validation. you need to use the tooltip like dialog tooltip for you tooltip e.g.

fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' data-init='quicktip' data-quicktip-type='error'>Email is not valid</span>");

Thanks

Arun

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,260 likes

Total Posts

3,149 posts

Correct Reply

886 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,260 likes

Total Posts

3,149 posts

Correct Reply

886 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

22-05-2018

Hi Rashid,

I would suggest to make your own CSS rule for this tool-tip div and apply width:100%.
But if you have text which won't be fit in a single line, you will face the same problem again.

I am not sure why you want to do that. anyway t=you can play with CSS to achieve this.

Thanks

Arun

Avatar

Avatar
Validate 10
Level 3
RashidJorvee
Level 3

Likes

28 likes

Total Posts

54 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
RashidJorvee
Level 3

Likes

28 likes

Total Posts

54 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
RashidJorvee
Level 3

22-05-2018

Hi Arun,

Is there not any default layout which I can add for this which handle multi line description and show in a small tooltip only above the textbox? Like in below screen shot.

1493093_pastedImage_0.png