Touch ui Tool tip broken when field description is big

Avatar

Avatar

srinivas_chann1

Avatar

srinivas_chann1

srinivas_chann1

30-07-2019

Hi,

In Touch ui When field description is big the tool tip details cannot be seen properly .How could be solved. Any inputs

Thanks

1802604_pastedImage_0.png

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

andyshreve

Avatar

andyshreve

andyshreve

30-07-2019

I had a similar issue in 6.3 with long tooltip descriptions being clipped off or not fully displayed in a dialog. I solved it by putting 2 new styles in a new CSS clientlib assigned to the coralui2 and coralui3 categories. These styles allow the long tooltips to wrap to multiple lines.

/* Style to correct tooltip alignment when the tooltip is left of the icon */

.coral3-Tooltip--info.coral3-Tooltip--arrowLeft {

    left: auto !important;

    right: 25px !important;

}

/* Style to correct tooltip alignment when the tooltip is above the icon */

.coral3-Tooltip--info.coral3-Tooltip--arrowUp {

    left: auto !important;

}

Answers (5)

Answers (5)

Avatar

Avatar

srinivas_chann1

Avatar

srinivas_chann1

srinivas_chann1

30-07-2019

Thanks All for the help

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

857

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

857
Arun_Patidar
MVP

30-07-2019

Hi,

It's like known issue with coral3 fields in 6.3

you can create a clientlibs of category cq.authoring.dialog and use below css to fix this

.cq-dialog-content .coral3-Tooltip{

   left : 50px !important;       

}

Avatar

Avatar

srinivas_chann1

Avatar

srinivas_chann1

srinivas_chann1

30-07-2019

Hi ,

I am using AEM6.3

Below is the touch ui dialog which is having the issue for fieldDescription and i have also pasted the dialog details.

Please provide inputs as how this could be resolved

1802879_pastedImage_0.png

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

    jcr:primaryType="nt:unstructured"

    jcr:title="dialog"

sling:resourceType="cq/gui/components/authoring/dialog">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/coral/foundation/container">

        <items jcr:primaryType="nt:unstructured">

            <tabs

                jcr:primaryType="nt:unstructured"

                sling:resourceType="granite/ui/components/coral/foundation/tabs"

                maximized="{Boolean}true">

                <items jcr:primaryType="nt:unstructured">

                    <tab1

                        jcr:primaryType="nt:unstructured"

                        jcr:title="dialog"

                        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

                        margin="{Boolean}true">

                        <items jcr:primaryType="nt:unstructured">

                            <Configuration

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/coral/foundation/container">

                                <items jcr:primaryType="nt:unstructured">

<accordion1

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/coral/foundation/accordion"

                                        variant="quiet">

                                        <items jcr:primaryType="nt:unstructured">

<feedconfig

                                                jcr:primaryType="nt:unstructured"

                                                jcr:title="Tags "

                                                sling:resourceType="granite/ui/components/coral/foundation/container"

                                                maximized="{Boolean}true">

                                                <items jcr:primaryType="nt:unstructured">

<taga

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete"

fieldDescription="These tags will show up on data for  various Landing page in  sample filter dropdown"

fieldLabel="Taga"

multiple="{Boolean}true"

name="./tagsRegion"

mode="contains">

<datasource

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/common/datasources/tags"/>

<options

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/list"/>

<values

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/tags"/>

</tagb>

                                            </feedconfig>

     </items>

                                    </accordion1>

    </items>

                            </Configuration>

                        </items>

                    </tab1>

                </items>

            </tabs>

        </items>

    </content>

</jcr:root>

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

857

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

857
Arun_Patidar
MVP

30-07-2019

Hi,

Can you please let us know more details

Which AEM version are you using?

ResourceType coral2 or Coral3?
Dailog layout?

or can you share diaiog xml?

Avatar

Avatar

rampai

Avatar

rampai

rampai

30-07-2019

Hi srinivas channappa​,

Can you try using the alert resourceType instead for big text? Default info variant should do the trick.

Alert — Granite UI 1.0 documentation

The difference will be that it will be fixed and displayed all the time in the authoring UI.

1802727_pastedImage_3.png

Or put your dialog items inside accordion to give more room to the tooltip to expand.

1802726_pastedImage_2.png

It is mostly the first item in the dialog that will be affected when there is big text. Rest will work fine.

If you still want the text to be shown as a tooltip, can you attach a sample package of your dialog? Also have you made any customizations to the dialog for your application?