+ Start a Discussion
louisa barrett 7louisa barrett 7 

SLDS Tooltip text is not wrapping

Hi,

I am trying to show a tooltip within an aura:iteration. The tooltip is now displaying but the text is not wrapping onto the next line, it's continuing beyond the boundaries of the toolttip containiner.
I've changed the text colour to make it a little clearer what's happening
Tooltip

Component
<lightning:layoutItem size="12" padding="around-small"><b>Professional Services</b>
        <div class="psWork-events slds-scrollable">
            <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                <thead>
                    <tr>
                        <th scope="col">
                            <div>Work</div>
                        </th>
                        <th scope="col">
                            <div>Account Name</div>
                        </th>
                        <th scope="col">
                            <div>Start</div>
                        </th>
                        <th scope="col">
                            <div># Days</div>
                        </th>
                        <th scope="col">
                            <div># Alloc</div>
                        </th>
                        <th scope="col">
                            <div># Req</div>
                        </th>
                        <th scope="col">
                            <div>Project Manager</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.swList}" var="item" indexVar="index">
                        <tr data-selected-Index="{!index}">
                            <td>
                                <div class="{!'fc-event ' + item.className}" 
                                     data-id="{!item.id}" 
                                     data-title="{!item.title}"
                                     data-tag="{!item.tag}"
                                     data-starts="{!item.starts}"
                                     data-opp = "{!item.navigationId}"
                                     data-index="{!index}"
                                     onmouseover="{!c.handleMouseOver}"
                                     onmouseout="{!c.handleMouseOut}"
                                     onclick="{!c.handleClick}"> {!item.title}
                                    <div aura:id="ps-hover" 
                                         class="slds-hide slds-popover slds-popover_tooltip slds-nubbin_left" 
                                         style="position:absolute;top:-4px;left:35px">
                                        <div class="slds-popover__body" style="color:red;">
                                             Some really long text that should drop onto the next line, but what's actually happening is the text is continuing outside of the tooltip boundaries
                                        </div>               
                                    </div> 
                                </div>
                            </td>
                            <td>
                                <div>{!item.accountName}</div>
                            </td>
                            <td> 
                                <div><lightning:formattedDateTime value ="{!item.starts}"  month="short" day="2-digit" /> </div>
                            </td>
                            <td> 
                                <div>{!item.numberOfDays}</div>
                            </td>
                            <td> 
                                <div>{!item.alcTechCount}</div>
                            </td>
                            <td> 
                                <div>{!item.reqTechCount}</div>
                            </td>
                            <td> 
                                <div>{!item.ProjectManager}</div>
                            </td>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </div> 
    </lightning:layoutItem>


Controller:
 
handleMouseOver : function(component,event,helper){
        console.log('Mouse entered');
        var items = component.find("ps-hover");
        if(!items.length) items = [items];
        console.log('Removing class for =', parseInt(event.target.dataset.index ));
        $A.util.removeClass(items[parseInt(event.target.dataset.index)],'slds-hide');
    },
    handleMouseOut : function(component,event,helper){ 
        console.log('Mouse left');
        var items = component.find("ps-hover");
        if(!items.length) items = [items];
        console.log('Adding class for =', parseInt(event.target.dataset.index ));
        $A.util.addClass(items[parseInt(event.target.dataset.index)],'slds-hide');      
    }

Any help would be much appreciated
Thanks
 
ANUTEJANUTEJ (Salesforce Developers) 
Hi Louisa,

As per my understanding, is it that you would like to wrap text inside the cell inside the table if that is the case can you please have a look at the below link that seems to be having a similar implementation.

>> https://stackoverflow.com/questions/6666532/how-to-force-table-cell-td-content-to-wrap

Please mark this answer as best if it helps so that others facing the same issue will find it useful.
 
Thanks