1

I am using the lightning:tile component and want to show a different tooltip than the default - The default tooltip is the same as the label:

enter image description here

And I want it to be different text, here is my code:

<lightning:tile label="This is my label" title="This is my tooltip">
    <aura:set attribute="media">
        <lightning:icon iconName="doctype:txt" size="xx-small"/>
    </aura:set>
</lightning:tile>

I was trying to change the title attribute of the component, but it does not work (maybe because I am changing the media - the title of the media changes, but the title of the label stays the same:

enter image description here

Question

Is there a way to change the title of the label?

1

I found a workaround but it's a bit ugly.

First, I remove the cursor action on the h3 generated by the lightning component. The one which has the wrong title attribute.

Then, I add the link style to the container of this h3.

Lightning Component

<lightning:tile class="title-without-cursor" label="This is my label" title="This is my tooltip">
    <aura:set attribute="media">
        <lightning:icon iconName="doctype:txt" size="xx-small"/>
    </aura:set>
</lightning:tile>

CSS

.THIS .title-without-cursor{
    cursor: pointer;
    text-decoration: underline;
}
.THIS .title-without-cursor h3{
    pointer-events: none;
}
| improve this answer | |
  • Indeed ugly, but works perfect, Thanks @MartinLezer – Itai Shmida Apr 11 '18 at 6:20

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.