Added various tooltips (#4264)

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
-        className={`${className ?? ""} fi fi-${isoCountry.toLowerCase()}`}
-        title={country}
-      />
+      {includeOverlay ? (
+        <OverlayTrigger
+          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">
-        <Icon icon={getIcon()} />
-        <span>{countEl}</span>
-      </Button>
-    </Link>
+    <>
+      <OverlayTrigger
+        overlay={<Tooltip id={`${type}-count-tooltip`}>{getTitle()}</Tooltip>}
+        placement="bottom"
+      >
+        <Link className={className} to={url}>
+          <Button className="minimal">
+            <Icon icon={getIcon()} />
+            <span>{countEl}</span>
+          </Button>
+        </Link>
+      </OverlayTrigger>
+    </>
   );
 };