From 8318650689c65624fbd74db438edac11fb9bfd96 Mon Sep 17 00:00:00 2001
From: Erik Demaine <edemaine@mit.edu>
Date: Mon, 18 Dec 2023 15:55:40 -0500
Subject: [PATCH] Improve +/- help

---
 client/MessagePDF.coffee | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/client/MessagePDF.coffee b/client/MessagePDF.coffee
index b439973..8894821 100644
--- a/client/MessagePDF.coffee
+++ b/client/MessagePDF.coffee
@@ -1,6 +1,8 @@
 import React, {useEffect, useRef, useState} from 'react'
 import {useTracker} from 'meteor/react-meteor-data'
 import {useInView} from 'react-intersection-observer'
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
+import Tooltip from 'react-bootstrap/Tooltip'
 
 import {ErrorBoundary} from './ErrorBoundary'
 import {resolveTheme, oppositeTheme} from './theme'
@@ -242,16 +244,20 @@ WrappedMessagePDF = React.memo ({file}) ->
               <span className="fas #{if theme == 'dark' then 'fa-sun' else 'fa-moon'}" aria-hidden="true"/>
             </button>
           </TextTooltip>
-          <TextTooltip title="Previous page (-)">
+          <OverlayTrigger placement="top" flip overlay={(props) =>
+            <Tooltip {...props}>Previous page (or type <kbd>-</kbd>)</Tooltip>
+          }>
             <button className="btn btn-default prevPage #{if pageNum <= 1 then 'disabled'}" aria-label="Previous page" onClick={onChangePage -1}>
               <span className="fas fa-backward" aria-hidden="true"/>
             </button>
-          </TextTooltip>
-          <TextTooltip title="Next page (+)">
+          </OverlayTrigger>
+          <OverlayTrigger placement="top" flip overlay={(props) =>
+            <Tooltip {...props}>Next page (or type <kbd>+</kbd>)</Tooltip>
+          }>
             <button className="btn btn-default nextPage #{if pageNum >= numPages then 'disabled'}" aria-label="Next page" onClick={onChangePage +1}>
               <span className="fas fa-forward" aria-hidden="true"/>
             </button>
-          </TextTooltip>
+          </OverlayTrigger>
         </div>
         <span className="pdfStatus">
           <span className="space form-inline">