function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
KevinsanKevinsan 

visualforce popover cannot run in lightning

Dear all,
Following code can run well in classic, but cannot run in lightning.
Can anyone help? 
<apex:page standardController="Account">
    <apex:form>
        <td>            
            <div>
                <a href="/{!Account.id}"
                   id="lookup{!Account.id}opp4"
                   onblur="LookupHoverDetail.getHover('lookup{!Account.id}opp4').hide();"
                   onfocus="LookupHoverDetail.getHover('lookup{!Account.id}opp4', '/{!Account.id}/m?retURL=/{!Account.id}&isAjaxRequest=1').show();"
                   onmouseout="LookupHoverDetail.getHover('lookup{!Account.id}opp4').hide();"
                   onmouseover="LookupHoverDetail.getHover('lookup{!Account.id}opp4', '/{!Account.id}/m?retURL=/{!Account.id}&isAjaxRequest=1').show();">
                    Account: {!Account.Name}
                </a>
            </div>
        </td>
    </apex:form>
</apex:page>
Classic
Lightning
 
KevinsanKevinsan
finally, I modified code as following:(It can run both classic and lightning, but click the link at popover will only display account page in lightning view) 
<apex:page standardController="Account" docType="html-5.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type='text/javascript'>
        var $j = jQuery.noConflict();
        function showPopover(){
            var tooltip = $j('.slds-form-element__icon').find('.slds-hide');
            tooltip.removeClass('slds-hide');
        }
    </script>
    <apex:slds />
    <apex:form >
        <td class="slds-scope">
            <div class="slds-form-element__icon">
                <a href="/{!Account.id}" id="accountId"
                   onmouseover="showPopover();">
                    Account: {!Account.Name}
                </a>
                <div class="slds-popover slds-nubbin--left slds-hide" role="dialog">
                    <div class="slds-popover__body">
                        <span class="slds-icon_container slds-icon-standard-account slds-media__figure">
                            <svg class="slds-icon slds-icon_small" aria-hidden="true">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account" />
                            </svg>
                        </span>
                        <div class="slds-media__body">
                            <h2 class="slds-text-heading_medium slds-hyphenate" id="panel-heading-id">
                                <a href="{!'/one/one.app?#/sObject/'+ Account.Id + '/view'}">{!Account.Name}
                                </a>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </apex:form>
</apex:page>
display
User-added image
KevinsanKevinsan
The problem continues, anyone can tell me what is the url address of mini page for Ligntning? 
// This is the mini page url for classic
'/{!Account.id}/m?retURL=/{!Account.id}&isAjaxRequest=1'