Current I have a table and want to display a popover whenever the user mouseover's a comment section in a table. What happens when the popover executes, it resizes the table to accommodate it by pushing the next which is the menuSelection. I need a way to position the popover above the table and not resize.

enter image description here


    <div class="slds slds-truncate" onmouseenter="{!c.openPop}" onmouseleave="{!c.closePop}" data-record="{!item.Comment__c}">
    <lightning:formattedRichText value="{!item.Comment__c}"/>   

<aura:if isTrue="{!v.isHoverOver}">
    <section class="slds-popover slds-popover_walkthrough slds-popover_feature slds-nubbin_left-top" role="dialog" aura:id="pop" id="pop" aria-label="Dialog Title" aria-describedby="dialog-body-id-2">        
        <div class="slds-popover__body" id="dialog-body-id-2">
            <div class="slds-media">
                <div class="slds-media__body">
                    <lightning:formattedRichText value="{!item.Comment__c}"/>


openPop : function(component, event, helper) {
    component.set('v.isHoverOver', true);

closePop : function(component, event, helper) {
    component.set('v.isHoverOver', false);
  • Easier would be to use popover from lightning:overlayLibrary. – Raul Jun 7 '18 at 13:27
  • @Raul Does this work for lightning:formattedRichText or just lightning:input? – Jeff Jun 7 '18 at 16:00
  • Yes it would work, basically we can dynamically create a lightning:formattedRichText or any other tag and attach it to popovers body. – Raul Jun 7 '18 at 20:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.