I have a modal dialog, on which I have some fields, two buttons [close, save] I have included a tooltip on one of the fields

<div class="modal-static-column">
  <lightning:helptext content="{!$Label.c.HelpText}"/>

When the mouse hovers over the tooltip icon, the bubble text is shown. The bubble text remains when the following sequence of events occurs

  • give focus to one of the fields
  • hover the mouse over tooltip icon (bubble text appears)
  • use keyboard TAB key to navigate focus to the [Cancel] button
  • ensuring the bubble help text is still visible hit the return key

The modal dialog closes, but the tooltip bubble text still shows.

How can I clear the bubble text?


Try this?

Add an aura:id to the div (preferably) or the lightning:helptext like so:

<div aura:id="hideAfterClose" class="modal-static-column">
  <lightning:helptext content="{!$Label.c.HelpText}"/>

And in the method responsible for closing the modal, hide the div via CSS:

onClose: function(cmp, event) {
        var helpText = cmp.find('hideAfterClose');
        $A.util.addClass(helpText, 'slds-hide');
  • That will hide the tooltip icon itself, but it won't get rid of the popup bubble text <lightning-primitive-bubble style="position: absolute; min-width: 75px; left: 533px; bottom: 668.5px;" class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-rise-from-ground"> onClose needs to be able to get at this DOM element and replace slds-rise-from-ground with slds-fall-into-ground. But, I don't know how to get at this element? – MickM Jul 13 '18 at 5:47

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.