Hover Text on lightning button in custom lightning component

Question

I have a lightning component button in a custom lightning component. I want a hover text to appear on the button. Is this possible in lightning?

Answer 1

You can try to add you text with transparency and remove opacity on hover.

.my-button-text { opacity: 0; } .my-button-text:hover { opacity: 1.0; }

Hope it can help resolve you problem.

Answer 2

Here are two options.

You can specify the title attribute of the lightning:icon element.

<lightning:icon iconName="utility:info" alternativeText="More Information" title="Help text goes here." />

The alternative-text attribute is what's read as assistive text followed by the help text.

Or, you can use the helptext component instead of the icon component. It's the icon with the help text on hover. You can only use the utility icons with this though, but there are over 200. The icon is specified the same way, and the content attribute specifies the text shown on hover.

<lightning:helptext iconName="utility:info" size="xx-small" content = 'Help text goes here. ' alternative-text = 'More Information'/>

Here's a link to the documentation.

I hope this helps.