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