Added various tooltips (#4264)

ui/v2.5/src/components/Galleries/GalleryCard.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup } from "react-bootstrap";
+import { Button, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
 import React from "react";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
@@ -112,11 +112,16 @@ export const GalleryCard: React.FC<IProps> = (props) => {
   function maybeRenderOrganized() {
     if (props.gallery.organized) {
       return (
-        <div className="organized">
+        <OverlayTrigger
-          <Button className="minimal">
+          overlay={<Tooltip id="organised-tooltip">{"Organized"}</Tooltip>}
-            <Icon icon={faBox} />
+          placement="bottom"
-          </Button>
+        >
-        </div>
+          <div className="organized">
+            <Button className="minimal">
+              <Icon icon={faBox} />
+            </Button>
+          </div>
+        </OverlayTrigger>
       );
     }
   }

ui/v2.5/src/components/Performers/PerformerCard.tsx

@@ -237,6 +237,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
           <CountryFlag
             className="performer-card__country-flag"
             country={performer.country}
+            includeOverlay
           />
           <span className="performer-card__country-string">
             {performer.country}

ui/v2.5/src/components/Scenes/SceneCard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef } from "react";
-import { Button, ButtonGroup } from "react-bootstrap";
+import { Button, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { Link, useHistory } from "react-router-dom";
 import cx from "classnames";
 import * as GQL from "src/core/generated-graphql";
@@ -317,11 +317,16 @@ export const SceneCard: React.FC<ISceneCardProps> = (
   function maybeRenderOrganized() {
     if (props.scene.organized) {
       return (
-        <div className="organized">
+        <OverlayTrigger
-          <Button className="minimal">
+          overlay={<Tooltip id="organised-tooltip">{"Organized"}</Tooltip>}
-            <Icon icon={faBox} />
+          placement="bottom"
-          </Button>
+        >
-        </div>
+          <div className="organized">
+            <Button className="minimal">
+              <Icon icon={faBox} />
+            </Button>
+          </div>
+        </OverlayTrigger>
       );
     }
   }

ui/v2.5/src/components/Shared/CountryFlag.tsx

@@ -1,17 +1,20 @@
 import React from "react";
 import { useIntl } from "react-intl";
 import { getCountryByISO } from "src/utils/country";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
 interface ICountryFlag {
   country?: string | null;
   className?: string;
   includeName?: boolean;
+  includeOverlay?: boolean;
 }
 
 export const CountryFlag: React.FC<ICountryFlag> = ({
   className,
   country: isoCountry,
   includeName,
+  includeOverlay,
 }) => {
   const { locale } = useIntl();
 
@@ -22,10 +25,19 @@ export const CountryFlag: React.FC<ICountryFlag> = ({
   return (
     <>
       {includeName ? country : ""}
-      <span
+      {includeOverlay ? (
-        className={`${className ?? ""} fi fi-${isoCountry.toLowerCase()}`}
+        <OverlayTrigger
-        title={country}
+          overlay={<Tooltip id="{country}-tooltip">{country}</Tooltip>}
-      />
+        >
+          <span
+            className={`${className ?? ""} fi fi-${isoCountry.toLowerCase()}`}
+          />
+        </OverlayTrigger>
+      ) : (
+        <span
+          className={`${className ?? ""} fi fi-${isoCountry.toLowerCase()}`}
+        />
+      )}
     </>
   );
 };

ui/v2.5/src/components/Shared/PopoverCountButton.tsx

@@ -4,9 +4,10 @@ import {
   faImages,
   faPlayCircle,
   faUser,
+  faMapMarkerAlt,
 } from "@fortawesome/free-solid-svg-icons";
 import React, { useMemo } from "react";
-import { Button } from "react-bootstrap";
+import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { FormattedNumber, useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import { IUIConfig } from "src/core/config";
@@ -14,7 +15,13 @@ import { ConfigurationContext } from "src/hooks/Config";
 import TextUtils from "src/utils/text";
 import { Icon } from "./Icon";
 
-type PopoverLinkType = "scene" | "image" | "gallery" | "movie" | "performer";
+type PopoverLinkType =
+  | "scene"
+  | "image"
+  | "gallery"
+  | "marker"
+  | "movie"
+  | "performer";
 
 interface IProps {
   className?: string;
@@ -43,6 +50,8 @@ export const PopoverCountButton: React.FC<IProps> = ({
         return faImage;
       case "gallery":
         return faImages;
+      case "marker":
+        return faMapMarkerAlt;
       case "movie":
         return faFilm;
       case "performer":
@@ -67,6 +76,11 @@ export const PopoverCountButton: React.FC<IProps> = ({
           one: "gallery",
           other: "galleries",
         };
+      case "marker":
+        return {
+          one: "marker",
+          other: "markers",
+        };
       case "movie":
         return {
           one: "movie",
@@ -105,11 +119,18 @@ export const PopoverCountButton: React.FC<IProps> = ({
   }, [count, abbreviateCounter]);
 
   return (
-    <Link className={className} to={url} title={getTitle()}>
+    <>
-      <Button className="minimal">
+      <OverlayTrigger
-        <Icon icon={getIcon()} />
+        overlay={<Tooltip id={`${type}-count-tooltip`}>{getTitle()}</Tooltip>}
-        <span>{countEl}</span>
+        placement="bottom"
-      </Button>
+      >
-    </Link>
+        <Link className={className} to={url}>
+          <Button className="minimal">
+            <Icon icon={getIcon()} />
+            <span>{countEl}</span>
+          </Button>
+        </Link>
+      </OverlayTrigger>
+    </>
   );
 };

ui/v2.5/src/components/Tags/TagCard.tsx

@@ -1,14 +1,12 @@
-import { Button, ButtonGroup } from "react-bootstrap";
+import { ButtonGroup } from "react-bootstrap";
 import React from "react";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
 import NavUtils from "src/utils/navigation";
 import { FormattedMessage } from "react-intl";
-import { Icon } from "../Shared/Icon";
 import { TruncatedText } from "../Shared/TruncatedText";
 import { GridCard } from "../Shared/GridCard";
 import { PopoverCountButton } from "../Shared/PopoverCountButton";
-import { faMapMarkerAlt, faUser } from "@fortawesome/free-solid-svg-icons";
 
 interface IProps {
   tag: GQL.TagDataFragment;
@@ -114,12 +112,12 @@ export const TagCard: React.FC<IProps> = ({
     if (!tag.scene_marker_count) return;
 
     return (
-      <Link className="marker-count" to={NavUtils.makeTagSceneMarkersUrl(tag)}>
+      <PopoverCountButton
-        <Button className="minimal">
+        className="marker-count"
-          <Icon icon={faMapMarkerAlt} />
+        type="marker"
-          <span>{tag.scene_marker_count}</span>
+        count={tag.scene_marker_count}
-        </Button>
+        url={NavUtils.makeTagSceneMarkersUrl(tag)}
-      </Link>
+      />
     );
   }
 
@@ -153,12 +151,12 @@ export const TagCard: React.FC<IProps> = ({
     if (!tag.performer_count) return;
 
     return (
-      <Link className="performer-count" to={NavUtils.makeTagPerformersUrl(tag)}>
+      <PopoverCountButton
-        <Button className="minimal">
+        className="performer-count"
-          <Icon icon={faUser} />
+        type="performer"
-          <span>{tag.performer_count}</span>
+        count={tag.performer_count}
-        </Button>
+        url={NavUtils.makeTagPerformersUrl(tag)}
-      </Link>
+      />
     );
   }