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


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


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


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

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, 2017 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, 2017 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, 2018 at 19:24

6 Answers 6


In your Visualforce page use <style> tag and paste the following CSS style.

.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: 6000;
    background-color: #fff;
    display: inline-block;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .16);
    border: 1px solid #d9dbdd

.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-fall-into-ground {
    visibility: hidden;
    opacity: 0;
    transform: translate(0, 0);
    transition: opacity .1s linear, visibility .1s linear, transform .1s linear;
    will-change: transform

.slds-nubbin_bottom-left:before {
    width: 1rem;
    height: 1rem;
    position: absolute;
    transform: rotate(45deg);
    content: '';
    background-color: inherit;
    bottom: -.5rem;
    margin-left: -.5rem

.slds-nubbin_bottom-left:before {
    left: 1.5rem;
    top: 100%;
    margin-top: -.5rem

.slds-nubbin_bottom-left:after {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .16);
    z-index: -1

.slds-popover :last-child {
    margin-bottom: 0

If you use the above style in your Visualforce page, then Lightning:helpText component or the fieldLevelHelp attribute shall work properly in lightning out same as it works in lightning community or in Salesforce lightning interface


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')}" />

{!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:


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


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- 

My component :

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

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.


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>
        var doc = document.getElementById("lightningFrame").contentWindow.document;

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

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

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.


I'm implementing the "Configure" page for a managed package. I developed an LWC component and turned out that it needs to be invoked from a Visualforce page. I used the approach the "H Alves" mentioned -> document.querySelector("body").classList.add("slds-scope")

<apex:page applyBodyTag="false">

    <apex:slds /> 
    <apex:includeLightning />

    <div id="lightningvf" />

        $Lightning.use("Namespace:AuraApp", function() {
                { },
                function(cmp) {
                    // lwc component was created


lightning:helptext not working in Lightning Out. So find below the alternative solution, which is working for both Lightning CMP and Lightning out also.

  1. Add below code in MyHelpText.cmp:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId,force:lightningQuickAction" access="global">
<div class="slds-form-element"><label class="slds-form-element__label" for="tooltip-showing-form-element-help-01">Description</label>
            <div class="slds-form-element__icon">
                <button class="slds-button slds-button_icon" onmouseover="{!c.displayHelpText}" onmouseout="{!c.displayOutHelpText}" aria-describedby="help">
                    <lightning:icon class="slds-button__icon" iconName="utility:info" size="x-small" alternativeText="Help Text" title="Image" />
                <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left  slds-fall-into-ground" role="tooltip" aura:id="help"
                    <div class="slds-popover__body">Your Helptext goes here</div>
            <div class="slds-form-element__control">
                <lightning:textarea aura:id="description" value="{!v.description}" maxlength="131072"  />
  1. In Lightning MyHelpTextController.js add below methods:
displayHelpText : function(component, event, helper) {
    var cmpTarget = component.find('help');
    $A.util.removeClass(cmpTarget, 'slds-fall-into-ground');
    $A.util.addClass(cmpTarget, 'slds-rise-from-ground');
displayOutHelpText : function(component, event, helper) {
    var cmpTarget = component.find('help');
    $A.util.removeClass(cmpTarget, 'slds-rise-from-ground');
    $A.util.addClass(cmpTarget, 'slds-fall-into-ground');

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.