Touch ui Tool tip broken when field description is big

Accepted Solutions (1)

Accepted Solutions (1)

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)

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;       

}

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>

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?

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?