0

We have chosen not to apply slds-scope to the body tag of our Visualforce application, because it results in some undesirable behavioral artifacts in our legacy application.

Everything pretty much worked fine, until we tried to use <lightning-helptext> inside an LWC we were bringing in using Lightning Out. It turns out this component adds some DOM elements directly under the body (<lightning-primitive-bubble> to be exact). We can actually the code in the component that is adding this to the body. The problem is, with no slds-scope class to trigger the SLDS classes, the formatting and behavior doesn't work at all.

Is there some way to get <lightning-helptext> to work correctly even when the body does not have .slds-scope on it?

A few more details

There is not that much HTML to show. There is a <lightning-helptext> component

<lightning-helptext content={attr.description}></lightning-helptext>

which we are using from within our <attributes-rendered> LWC. When that component, which uses <lightning-helptext>, is instantiated, it places the following in an entirely different place in the DOM, at the bottom, as a direct descendant of the body tag, where the slds-scope does not apply.

<lightning-primitive-bubble 
  class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-fall-into-ground" 
  style="position: fixed; min-width: 75px; z-index: 9001; left: 150px; right: auto; top: 310.182px;" 
  data-position-id="lgcp-1000005">
    <div class="slds-popover__body" id="salesforce-lightning-tooltip-bubble_05e3b740-84cd-32f3-a3a2-8f61eb3cb221">
      Display closed history items?
    </div>
</lightning-primitive-bubble>

Without the styling that would be invoked by the presence of an .slds-scope class on a parent element, we get a useless, unstyled tooltip.

  • Maybe just add a <div class="slds-scope"> just before your lightning-helptext? – Brian Miller Feb 5 at 22:29
  • slds-scope is already in effect at the point in the DOM where <lightning-helptext> is being called, having been inserted by the Lightning Out machinery. The problem is that a <lightning-primitive-bubble> element is being inserted at a completely different location directly under the body tag, with no slds-scope to scope it. I tried manually adding a <div class="slds-scope"> around the <lightning-primitive-bubble>, and that worked, but of course in the real world I have no control over the code that is inserting that into the DOM. – kamezaburo Feb 5 at 22:59
  • 1
    can you post your HTML that is relevant so that we aren't stabbing in the dark at what you have and what you want? This would greatly benefit not only us here right now to help you resolve this, but others that may run into the same issue in the future and find this post. – Ronnie Feb 6 at 3:15

Your Answer

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

Browse other questions tagged or ask your own question.