Skip to main content
Fixed style code snippet.
Source Link
James Loghry
  • 6.2k
  • 1
  • 23
  • 50

Try this

Component:

<aura:component >
    <aura:attribute name="text" type="String" default="Enter your name here.."/>
    <div style="position:relative;" class="slds-size_1-of-4">
        <lightning:input type="text" label="Name" name="nameInput"/>
        <lightning:helptext content="{!v.text}" iconName="utility:info" class="popover"/>
    </div>
</aura:component>

</aura:component>

Style:

    .THIS {
}
.THIS .popover {
    position: absolute;
    left: 14%;
    bottom: 65%;
}

}

You can add your own style to align the helptext component wherever you want.

Try this

Component:

<aura:component >
<aura:attribute name="text" type="String" default="Enter your name here.."/>
<div style="position:relative;" class="slds-size_1-of-4">
    <lightning:input type="text" label="Name" name="nameInput"/>
    <lightning:helptext content="{!v.text}" iconName="utility:info" class="popover"/>
</div>

</aura:component>

Style:

    .THIS {
}
.THIS .popover {
position: absolute;
left: 14%;
bottom: 65%;

}

You can add your own style to align the helptext component wherever you want.

Try this

Component:

<aura:component >
    <aura:attribute name="text" type="String" default="Enter your name here.."/>
    <div style="position:relative;" class="slds-size_1-of-4">
        <lightning:input type="text" label="Name" name="nameInput"/>
        <lightning:helptext content="{!v.text}" iconName="utility:info" class="popover"/>
    </div>
</aura:component>

Style:

.THIS .popover {
    position: absolute;
    left: 14%;
    bottom: 65%;
}

You can add your own style to align the helptext component wherever you want.

Source Link
A.Bretto
  • 492
  • 6
  • 20

Try this

Component:

<aura:component >
<aura:attribute name="text" type="String" default="Enter your name here.."/>
<div style="position:relative;" class="slds-size_1-of-4">
    <lightning:input type="text" label="Name" name="nameInput"/>
    <lightning:helptext content="{!v.text}" iconName="utility:info" class="popover"/>
</div>

</aura:component>

Style:

    .THIS {
}
.THIS .popover {
position: absolute;
left: 14%;
bottom: 65%;

}

You can add your own style to align the helptext component wherever you want.