2

If the lightning component is opened through VF page I am unable to view lightning helptext popup. below is the VF that I am using.

    <apex:page sidebar="true" showHeader="true">
<apex:includeLightning />
    <center>
    <div id="lightning" style="margin-left:1%;margin-bottom:2%;"/></center>
    <script >
    $Lightning.use("nameSpace:CreateTemplateApp", function() {
            $Lightning.createComponent("nameSpace:CreateTemplateLC",
                                       {UserContext: {!$User.UIThemeDisplayed},recId:{!JSENCODE($CurrentPage.parameters.id)},
                                       "lightning",
                                       function(component) {});
        });
    </script> 
</apex:page>

CreateTemplateLC has lightning:helptext. If I open this page using a normal custom button with this VF page, helptext is breaking the page. Please refer below screenshot. enter image description here

If I open the same page using lightning component button, lightning:helptext popup is working without any issues. below are the lightning component and controller used to open CreateTemplateLC Component. markup :

<aura:component implements="force:lightningQuickAction,force:hasRecordId,force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName,flexipage:availableForAllPageTypes" 
            access="global">
<aura:attribute name="recId" type="String"/>
<aura:attribute name="sObjectName" type="String" />
<aura:attribute name="uiContext" type="String"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<lightning:button label="Create template" onclick="{! c.handleClick }"/>

Controller: has all functions required. I am firing below event to open the page component on handleClick function.

var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "nameSpace:CreateTemplateLC",
        componentAttributes: {
UserContext: context,
            recId : id
        }
    });
    evt.fire();

And the result is as below snapshot. While I am opening through above lightning component, it's working fine. enter image description here

Please let me know how to get this working while opening through VF page/normal button. I tried both firefox and chrome. we would like to get it working for both methods. Thank you.

3

You need to override styles in VF page as component help text does not render properly in vf container. Try below:

<apex:page sidebar="true" showHeader="true">

        <style>

            .slds-popover__body,.slds-popover__footer,.slds-popover__header {
            position: relative;
            padding: .5rem .75rem;
            word-wrap: break-word;
            }
            .slds-popover {
            position: relative;
            border-radius: .25rem;
            width: 20rem;
            min-height: 2rem;
            z-index: 10000;
            background-color: #fff;
            display: inline-block;
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .16);
            border: 1px solid #d9dbdd
            }
            .slds-popover--tooltip,
            .slds-popover_tooltip {
            width: auto;
            max-width: 20rem;
            background: #16325c;
            border: 0
            }
            .slds-popover--tooltip .slds-popover__body,
            .slds-popover_tooltip .slds-popover__body {
            font-size: .75rem;
            color: #fff
            }
            .slds-popover :last-child {
            margin-bottom: 0
            }

        </style>

        <apex:includeLightning />
        <center>
            <div id="lightning" style="margin-left:1%;margin-bottom:2%;"/></center>
        <script >
        $Lightning.use("nameSpace:CreateTemplateApp", function() {
            $Lightning.createComponent("nameSpace:CreateTemplateLC",
                                       {UserContext: {!$User.UIThemeDisplayed},recId:{!JSENCODE($CurrentPage.parameters.id)},
                                        "lightning",
                                        function(component) {});
                                       });
                                        </script> 
    </apex:page>
| improve this answer | |

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.