How to hide tooltip bubble when modal dialog is closed

Question

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}"/>
</div>

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?

Answer 1

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}"/>
</div>

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');
    },