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.

1

1 Answer 1

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>
2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .