FIX: Clickable elements should have a tooltip.

See #285 and #308.

Author: benel

frontend/src/components/BrowseTools.jsx

@@ -44,7 +44,7 @@ function BrowseTools({id, closable, openable, editable, focusable = true}) {
           overlay={<Tooltip id="tooltip-focus">Focus on this document</Tooltip>}
         >
           <Link to={`../${id}`} className="icon focus">
-            <Bookmark title="Focus on this document" />
+            <Bookmark />
           </Link>
         </OverlayTrigger>
       }

frontend/src/components/FragmentComment.jsx

@@ -31,7 +31,6 @@ function FragmentComment({ children, setHighlightedText }) {
           }
         }
         className="fragment"
-        title="Highlight in document"
       >
         <span className="citation">{citation}</span>
         {commentParts}

frontend/src/components/License.jsx

@@ -1,3 +1,5 @@
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
 function License({ license }) {
   if (license === 'Public domain') return (
     <div className="license">
@@ -8,9 +10,11 @@ function License({ license }) {
   let [license_name] = /(BY[\w-]*)/i.exec(license_uri) || [];
   if (license_name) return (
     <div className="license">
-      <a href={license_uri}>
-        <img src= {`./license/cc.${license_name.toLowerCase()}.svg`} alt={`CC-${license_name.toUpperCase()}`} style={{height: '2em'}}/>
-      </a>
+      <OverlayTrigger overlay={<Tooltip>Consult license clauses</Tooltip>} >
+        <a href={license_uri}>
+          <img src= {`./license/cc.${license_name.toLowerCase()}.svg`} alt={`CC-${license_name.toUpperCase()}`} style={{height: '2em'}}/>
+        </a>
+      </OverlayTrigger>
     </div>
   );
   return (

frontend/src/components/Menu.jsx

@@ -7,20 +7,23 @@ import Row from 'react-bootstrap/Row';
 import Form from 'react-bootstrap/Form';
 import Dropdown from 'react-bootstrap/Dropdown';
 import { Link } from 'react-router-dom';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import SignOutAction from '../menu-items/SignOutAction';
 
 function Menu({backend, user, setUser}) {
   return (
     <Navbar bg="dark">
       <Container>
         <Navbar.Brand>
-          <Link to="/">
-            <img
-              src="/logo.png"
-              height="30"
-              alt="Index"
-            />
-          </Link>
+          <OverlayTrigger overlay={<Tooltip>Consult my bookshelf</Tooltip>} placement="bottom">
+            <Link to="/">
+              <img
+                src="/logo.png"
+                height="30"
+                alt="Index"
+              />
+            </Link>
+          </OverlayTrigger>
         </Navbar.Brand>
         <Authentication {...{backend, user, setUser}} />
       </Container>

frontend/src/components/Metadata.jsx

@@ -2,6 +2,7 @@ import '../styles/Metadata.css';
 
 import { useEffect, useState } from 'react';
 import { parse, stringify } from 'yaml';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 function Metadata({metadata = {}, editable, backend, setLastUpdate}) {
   const [beingEdited, setBeingEdited] = useState(false);
@@ -54,11 +55,8 @@ function Metadata({metadata = {}, editable, backend, setLastUpdate}) {
 
   if (!beingEdited) {
     let {dc_title, dc_spatial, dc_creator, dc_translator, dc_isPartOf, dc_issued, dc_language} = editedMetadata;
-    let attributes = (editable)
-      ? {className: 'editable metadata', onClick: handleClick, title: 'Edit metadata...'}
-      : {};
-    return (
-      <span {...attributes}>
+    let formattedMetadata = (
+      <>
         <span className="work">
           {getCaption({dc_title, dc_spatial})} {format(dc_creator, '(', ')')},
         </span>
@@ -67,6 +65,18 @@ function Metadata({metadata = {}, editable, backend, setLastUpdate}) {
           {dc_isPartOf ? <i>{dc_isPartOf}, </i> : ''}
           {dc_issued ? `${new Date(dc_issued.toString()).getFullYear()}` : ''}
         </span>
+      </>
+    );
+    if (editable) return (
+      <OverlayTrigger overlay={<Tooltip>Edit metadata...</Tooltip>} >
+        <span className="editable metadata" onClick={handleClick} >
+          {formattedMetadata}
+        </span>
+      </OverlayTrigger>
+    );
+    return (
+      <span>
+        {formattedMetadata}
       </span>
     );
   }

frontend/src/components/VideoComment.jsx

@@ -1,20 +1,26 @@
 import '../styles/VideoComment.css';
 
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
 function VideoComment({ children }) {
   const timecodeRegex = /(\d{2}:\d{2}:\d{2}\.\d{3}\s*-->\s*\d{2}:\d{2}:\d{2}\.\d{3})/;
-  if (timecodeRegex.test(children)) {
-    return <p
-      onClick={
-        e => {
-          e.preventDefault();
-          e.stopPropagation();
-          playVideoAt(children[0]);
+  if (timecodeRegex.test(children)) return (
+    <OverlayTrigger overlay={<Tooltip>Play the video fragment</Tooltip>} >
+      <p
+        onClick={
+          e => {
+            e.preventDefault();
+            e.stopPropagation();
+            playVideoAt(children[0]);
+          }
         }
-      }
-      className="videoComment"
-      title="Go to the video excerpt"
-    >{children[0]}</p>;
-  }
+        className="videoComment"
+      >
+        {children[0]}
+      </p>
+    </OverlayTrigger>
+  );
+
   function playVideoAt(timecode) {
     let [start, end] = timecode.split('-->');
     let [hour, min, sec] = start.split(/[:.]/);