help text icon with lightning:select

Question

The docs are very clear on how to add a help text icon. I've tried to do this using lightning:select component. This is what I have so far but it doesn't appear to be working:

<lightning:buttonIcon iconName="utility:info" variant="bare" onclick="{! c.handleClick }" alternativeText="Settings" />                        

<div class="slds-col slds-size_1-of-2">
    <lightning:select label="Please select one:">
        <aura:iteration items="{!v.items}" var="i">
            <option text="{!i.label}" value="{!i.value}"/>
        </aura:iteration>
    </lightning:select>  
</div>

This is what it looks like with the code above. Any ideas how to implement this design with lightning components?

Answer 1

You can not at this time. The placement of the element you need to put in precludes the possibility of using help text with the standard component library. Support would need to be added for a helptext attribute. For now, if you want help text icons, you'll have to write (read: copy-paste) your own custom components.

Answer 2

You could do something like this: http://sfdcmonkey.com/2018/10/20/display-help-text-lightninginput-field-component/ but for lightning:select I found at least at Winter'19 that the hidden-label variant for this component is missing the slds-assistive-text class that properly hides the label. You could just applied the same styles from that class using the style element of the component. Something like this:

.THIS .assistive-text > label { position: absolute !important; margin: -1px !important; border: 0 !important; padding: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; text-transform: none !important; white-space: nowrap !important; }