4

I'm having issues rendering the lightning:helptext component with Lightning Out. Here's the code that will reproduce the issue:

TestOut.page

<apex:page showHeader="false" sidebar="false">
    <apex:includeLightning />
    <div id="lightning" />
    <script>
        $Lightning.use("c:TestApp", function(){
            $Lightning.createComponent(
                "c:TestCmp",
                {},
                "lightning",
                function(cmp){}
            );
        });
    </script>
</apex:page>

TestApp.app

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:TestCmp"/>
</aura:application>

TestCmp.cmp

<aura:component >
    <lightning:helptext content="Your email address will be your login name" />
</aura:component>

The lightning:helptext component appears invisible on the page. I can hover the mouse over it (if I manage to find it), after which the text from the content attribute is rendered under the component as plain text.

I'm using API v41.0, so it's not that. Also, the same component renders and functions fine when used outside of Lightning Out. I couldn't find any documentation that states that this component isn't supported in Lightning Out.

  • It seems to bug in that , You may create a component for that , I have tested with creating Tooltip component and its working fine in Lightning Out too. refer this lightningdesignsystem.com/components/tooltips/#content – vignesh Nov 29 '17 at 7:29
  • 1
    Thanks, I created a custom component for this, and it works alright. However, I'm still wondering why the standard component doesn't work. It's mostly curiosity. – smukov Nov 29 '17 at 8:32
  • In case somebody stumbles upon the same issue and is in need of a custom tooltip component, I wrote a quick post about it - smukov.github.io/blog/2018/02/18/Lightning-Help-Text – smukov Feb 18 '18 at 19:24
2

There's obviously an oversight here. The problem is due to the fact that the popover HTML text gets appended in the DOM outside the lightning HTML tag container having class slds-scope - to be precise as last element of the main body tag. Since all the lightning classes are scoped with slds-scope the tag cannot be styled properly.

<lightning-primitive-bubble class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-fall-into-ground">

You can only patch the problem by manually providing a stylesheet that is to be loaded only with Salesforce Classic. Something along these lines is to be added to the vf page:

    <apex:variable var="uiClassicStyles" value="classicStyles" rendered="{!themeClassic}">
        <apex:stylesheet value="{!URLFOR($Resource.MyResources, 'css/helptext.css')}" />
    </apex:variable>

{!themeClassic} in my case returns a boolean that tells me whether the page is open in Salesforce Classic or not.

In the helptext.css you can add the styles from the lightning design system to avoid headaches trying to figure out what you need:

https://www.lightningdesignsystem.com/assets/styles/slds-large.css

At the moment of writing this you would need the following rows: 8230 to 9028

| improve this answer | |
2

I had similar issue but my problem was the svg icon was not loading because the relative url in <use> tag was not working. It was searching on the website domain where the lightning out script is located.

I tried with <base> tag to change the base url in javascript but no luck I got some error like using different domain is not allowed while fetching the svg resource.

So I thought at least give some background color to the svg and I applied a background color then it came to me that I can put a background image too! So I took the svg definition from the symbols.svg salesforce resource file, saved it as info.svg in static resource and used below css on my lightning component :

.THIS .helpTextSvgColor svg{
    background: url("https://YOUR-INSTANCE-URL-THAT-WORKS-FOR-STATIC- 
 RESOURCES/resource/info"); 
 }

My component :

<div aura:id="helpTextSvg" class="helpTextSvgColor">                        
<lightning:helptext content="Your Content" /> 
</div> 

And it worked!

Here is then and after

enter image description here

enter image description here

Update: Just wanted to add one more problem and it's solution. In my lightning out component I put another help text this time on different component and the css styling was not getting applied. It was being applied in Salesforce internal tab but not on lightning out. So, I was wondering what to do and then I remember that we have a tag called <aura:html tag="style"> I used this on my component's top to apply the background style and it worked.

| improve this answer | |
0

I had the same problem, and have found two solutions, both of which are not ideal. The first one consists of adding document.querySelector("body").classList.add("slds-scope"); to your script. The drawback is that this will also change the styling of the salesforce header and sidebar.

The other solution involves some quite ugly code. Basically I added an empty Iframe on the visualforce page, and add the code to show the lightning-out app from javascript.

<apex:page sidebar="true" showHeader="true" standardController="Order">
    <apex:includeLightning />

    <!-- workaround for slds-scope problems in lightning out -->
    <iframe id="lightningFrame" style="width: 100%; height: 100%; min-height: 45rem;"></iframe>
    <script>
        var doc = document.getElementById("lightningFrame").contentWindow.document;
        doc.open();
        doc.write(decodeURIComponent("%3Chtml%3E%0A%09%3Chead%3E%0A%09%09%3Ctitle%3Etest%3C%2Ftitle%3E%0A%09%09%3Cscript%20src%3D%22%2Flightning%2Flightning.out.js%3Fv%3D2%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E%0A%09%3C%2Fhead%3E%0A%09%3Cbody%20class%3D%22slds-scope%22%3E%0A%09%09%3Cdiv%20id%3D%22lightning%22%2F%3E%0A%09%09%3Cscript%3E%0A%09%09%09var%20theId%20%3D%20%22{!$CurrentPage.parameters.id}%22%3B%0A%09%09%09%24Lightning.use(%22c%3AoutApp%22%2C%20function()%0A%09%09%09%7B%0A%09%09%09%24Lightning.createComponent(%22c%3AmyComponent%22%2C%20%7BrecordId%3A%20theId%7D%2C%20%22lightning%22%2C%20()%20%3D%3E%20%7B%7D)%3B%0A%09%09%09%7D)%3B%0A%09%09%3C%2Fscript%3E%0A%09%3C%2Fbody%3E%0A%3C%2Fhtml%3E"));
        doc.close();
    </script>
</apex:page>

Because the visualforce compiler complained about the html tags in a javascript string I uriEncoded the following document

<html>
    <head>
        <title>test</title>
        <script src="/lightning/lightning.out.js?v=2" type="text/javascript"></script>
    </head>
    <body class="slds-scope">
        <div id="lightning"/>
        <script>
            var theId = "{!$CurrentPage.parameters.id}";
            $Lightning.use("c:outApp", function()
            {
                $Lightning.createComponent("c:myComponent", {recordId: theId}, "lightning", () => {});
            });
        </script>
    </body>
</html>

and write that to the iframe. After uriencoding %7B!%24CurrentPage.parameters.id%7D will have to be replaced by {!$CurrentPage.parameters.id} again in order to not lose the record id for the visualforce 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.