Apex Code Development You need to sign in to do that
Don't have an account?
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
Component
Controller:
Any help would be much appreciated
Thanks
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
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
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