Make sure only one footnote balloon is on-screen at a time.

asl_rulebook2/webapp/static/ContentPane.js

@@ -1,5 +1,5 @@
 import { gMainApp, gFootnoteIndex, gEventBus, gUrlParams } from "./MainApp.js" ;
-import { findTargets, showErrorMsg, showNotificationMsg } from "./utils.js" ;
+import { findTargets, showErrorMsg, showNotificationMsg, hideFootnotes } from "./utils.js" ;
 
 // --------------------------------------------------------------------
 
@@ -48,6 +48,12 @@ gMainApp.component( "content-pane", {
 
         showFootnotes( footnotes ) {
 
+            // quickly hide the footnote balloon if it's already showing
+            // NOTE: It would be nice to leave it where it is if it's the same footnote, but we would
+            // also need to stop the show-target handler from closing it, and it becomes more effort
+            // than it's worth for something that will happen rarely.
+            hideFootnotes( true ) ;
+
             // show the footnote in a notification balloon
             let msg = this.makeFootnoteContent( footnotes ) ;
             let $growl = showNotificationMsg( "footnote", msg ) ;

asl_rulebook2/webapp/static/utils.js

@@ -153,10 +153,13 @@ export function showNotificationMsg( msgType, msg, info )
     return $growl ;
 }
 
-export function hideFootnotes()
+export function hideFootnotes( fast )
 {
     // hide the footnotes balloon
-    $( ".growl-footnote" ).find( ".growl-close" ).click() ;
+    if ( fast )
+        $( ".growl-footnote" ).hide() ;
+    else
+        $( ".growl-footnote" ).find( ".growl-close" ).click() ;
 }
 
 // --------------------------------------------------------------------