1

Need help with formatted tool tips when displayed on list of records. I am building an LWC component which displays a list of records. I want to display only the name column, however the users should not need to click through to see other key information.

I think the slds-popover_tooltip should do the trick. Only I can't seem to get it to work. Can you guys take a look and let me know what I am doing wrong?

Expected Behaviour: When I mouseover the 'Name' the tooltip should be displayed. When I mouse out, tool tip should disappear Observed: Tooltip is always present, never disappears; below the Name.

I suspect this has something to do with the aria-describedby attribute. But don't know how to fix it

 <template for:each={records} for:item="record">
                <div class="slds-grid slds-wrap slds-p-vertical_xxx-small slds-border_bottom" key={record.Id}
<div class="slds-col slds-size_9-of-12 slds-p-left_medium" key={record.Id}>
                        <span>
                            <a aria-describedby={record.id} id={record.Id} onmouseover={handleMouseOver} onmouseout={handleMouseOut}
                                onclick={handleClick}>
                                {record.Name}
                            </a>
                        </span>
                        <div class="slds-popover_tooltip slds-nubbin_left-bottom slds-popover__body 
                                    slds-slide-from-bottom-to-top slds-slide-from-right-to-left box" role="tooltip" 
                                    id={action.id}  style="position:static; background-color: rgb(243, 242, 242);">
                            <b> Info1: </b> {record.info1} <br>
                            <b> Info2: </b> {record.info2} <br>
                            <b> Info3: </b> {record.info3}
                        </div>
                    </div>
</template>
2
  • 3
    Welcome to SFSE. Can you also please add the JS Code? Mainly the handleMouseOver and handleMouseOut functions? Commented Aug 9, 2021 at 9:55
  • SLDS does not implement any behaviors, you have to do all of that yourself
    – CyberJus
    Commented Aug 12, 2021 at 3:46

1 Answer 1

2

This is how I did it, I have 3 buttons with tooltip for each one.

        <div style="padding-left:2rem;position:relative">
    <lightning-button-group>
        <lightning-button-icon variant="neutral" onclick={handleShowEditModal}
            icon-name="utility:edit" data-target-id='edit' onmouseenter={handleMouseover}
            onmouseleave={handleMouseLeave}></lightning-button-icon>
        <lightning-button-icon variant="neutral" onclick={handleShowInfoModal}
            icon-name="utility:info" data-target-id='info' onmouseenter={handleMouseover}
            onmouseleave={handleMouseLeave}></lightning-button-icon>
        <lightning-button-icon variant="neutral" onclick={handleShowDeleteModal}
            icon-name="utility:delete" onmouseenter={handleMouseover} data-target-id="delete"
            onmouseleave={handleMouseLeave}></lightning-button-icon>
    </lightning-button-group>
    
    <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom slds-transition-hide transition-opacity"
        role="tooltip" data-id='edit' style="position:absolute;top:-45px;left:28px">
        <div class="slds-popover__body">{label.Edit_Button}</div>
    </div>
    <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom slds-transition-hide transition-opacity"
        role="tooltip" data-id='info' style="position:absolute;top:-45px;left:40px;width:5rem;">
        <div class="slds-popover__body">Show Info</div>
    </div>
    <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom slds-transition-hide transition-opacity"
        role="tooltip" data-id='delete' style="position:absolute;top:-45px;left:82px">
        <div class="slds-popover__body">{label.Delete_Button}</div>
    </div>
</div>

JS:

handleMouseover(event) {
    const targetId = event.target.dataset.targetId;
    const target = this.template.querySelector(`[data-id="${targetId}"]`);
    target.classList.remove('slds-transition-hide');
    target.classList.add('slds-transition-show');
}

handleMouseLeave(event) {
    const targetId = event.target.dataset.targetId;
    const target = this.template.querySelector(`[data-id="${targetId}"]`);
    target.classList.add('slds-transition-hide');
    target.classList.remove('slds-transition-show');
}

You must log in to answer this question.

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