0

I have the following code:

<lightning:accordion aura:id="accordion1" allowMultipleSectionsOpen="true">
    <lightning:accordionSection name="Selected" label="Selected">
        <div class="slds-m-around_medium">
            <c:strokeSelector aura:id="selectedStyle" properties="{!v.stroke}"/>
        </div>
    </lightning:accordionSection>

This appears as:

Screenshot

I would like to add a help text to the accordion, so that I can explain what "Selected" means.

Is that possible? I added <lightning:helptext but it appeared below not next to the Accordion title.

2 Answers 2

2

You can use action attribute which can have component as its value but you have to change the css manually to put it at correct place

<lightning:accordion aura:id="accordion" activeSectionName="B">
        <lightning:accordionSection name="A" label="Accordion Title A" >
            <aura:set attribute="actions">
                  <lightning:helptext
        content="The tooltip displays on the lower left of the icon or above the icon if space is available. It automatically adjusts its position according to the viewport."
    />
            </aura:set>
            <aura:set attribute="body">
                <p>This is the content area for section A.</p>
                <p>.</p>
                <p>.</p>
                <p>.</p>
                <p>The section height expands to fit your content.</p>
            </aura:set>
        </lightning:accordionSection>
     
    </lightning:accordion>

and in css

.THIS .slds-form-element__icon{
    left: 187px;
    position: absolute;
    

}
1

No, you can't do this with the built-in component. You could write your own custom component, though.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.