4

I have a lightning button as:

<lightning:buttonIcon iconName="utility:clear" size="large" variant="bare" alternativeText="Remove" onclick="{! c.removeEntry }"/>

On mouse hover , I want it to show the purpose of that button. But using alternativeText, it does not show the assistive text(Here, 'Remove'). Also, there is no onHover function available for lightning:buttonIcon. How can this be achieved?

3
  • 1
    This seems like a bug to me. Anyways, you can show the assistive text using the "title attribute".<lightning:buttonIcon iconName="utility:clear" size="large" variant="bare" title="Remove" alternativeText="Remove" onclick="{! c.removeEntry }"/> This worked for me. But I do not suggest using this since I couldn't find title as an attribute in the Lightning Developer Guide.
    – SE_User
    Jan 16, 2017 at 11:33
  • Are you calling your lightning component from a VF page?
    – S..
    Jan 16, 2017 at 11:48
  • @N.B. Yes, from a VF page.
    – Sarang
    Jan 17, 2017 at 9:20

1 Answer 1

4

As far as I can tell, someone managed to leave this functionality out of the lightning:buttonIcon. Maybe they'll add it in the next release. In SLDS, it's set via the title attribute. Here's a functional alternative that you can use for now:

<button class="slds-button slds-button--icon" title="settings">
    <lightning:icon iconName="utility:settings" size="medium" />
    <span class="slds-assistive-text">Settings</span>
</button>

Please adjust the styles/attributes you need accordingly.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .