diff --git a/frontend/src/components/fragments/SearchHint.tsx b/frontend/src/components/fragments/SearchHint.tsx
new file mode 100644
index 000000000..9223e2342
--- /dev/null
+++ b/frontend/src/components/fragments/SearchHint.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
+import { Icon, Tooltip } from "src/components/fragments";
+
+export const SearchHint: React.FC = () => (
+
+
+
+
+
+);
diff --git a/frontend/src/components/fragments/index.ts b/frontend/src/components/fragments/index.ts
index c4064ea02..d98f68f53 100644
--- a/frontend/src/components/fragments/index.ts
+++ b/frontend/src/components/fragments/index.ts
@@ -8,3 +8,4 @@ export { default as ErrorMessage } from "./ErrorMessage";
export { default as Help } from "./Help";
export { default as Tooltip } from "./Tooltip";
export { FavoriteStar } from "./Favorite";
+export { SearchHint } from "./SearchHint";
diff --git a/frontend/src/components/fragments/styles.scss b/frontend/src/components/fragments/styles.scss
index 5047cf8d4..57778e4f5 100644
--- a/frontend/src/components/fragments/styles.scss
+++ b/frontend/src/components/fragments/styles.scss
@@ -118,3 +118,9 @@
box-shadow: none;
}
}
+
+.SearchHint {
+ margin-left: 10px;
+ margin-right: 7px;
+ cursor: help;
+}
diff --git a/frontend/src/components/searchField/SearchField.tsx b/frontend/src/components/searchField/SearchField.tsx
index 1dfa76070..84a87aba7 100644
--- a/frontend/src/components/searchField/SearchField.tsx
+++ b/frontend/src/components/searchField/SearchField.tsx
@@ -11,7 +11,7 @@ import SearchPerformersGQL from "src/graphql/queries/SearchPerformers.gql";
import { SearchAllQuery, SearchPerformersQuery } from "src/graphql";
import { createHref, filterData, getImage } from "src/utils";
import { ROUTE_SEARCH } from "src/constants/route";
-import { GenderIcon } from "src/components/fragments";
+import { GenderIcon, SearchHint } from "src/components/fragments";
type SceneAllResult = NonNullable;
type PerformerAllResult = NonNullable<
@@ -234,6 +234,12 @@ const SearchField: FC = ({
components={{
DropdownIndicator: () => null,
IndicatorSeparator: () => null,
+ ValueContainer: ({ children }) => (
+ <>
+
+ {children}
+ >
+ ),
}}
noOptionsMessage={({ inputValue }) =>
inputValue === "" ? null : `No result found for "${inputValue}"`
diff --git a/frontend/src/components/studioSelect/StudioSelect.tsx b/frontend/src/components/studioSelect/StudioSelect.tsx
index 531d35db7..d7de27d27 100644
--- a/frontend/src/components/studioSelect/StudioSelect.tsx
+++ b/frontend/src/components/studioSelect/StudioSelect.tsx
@@ -2,6 +2,7 @@ import { FC } from "react";
import Async from "react-select/async";
import { useApolloClient } from "@apollo/client";
import debounce from "p-debounce";
+import { SearchHint } from "src/components/fragments";
import StudiosGQL from "src/graphql/queries/Studios.gql";
import StudioGQL from "src/graphql/queries/Studio.gql";
@@ -130,6 +131,14 @@ const StudioSelect: FC = ({
}
isClearable={isClearable}
formatOptionLabel={formatStudioName}
+ components={{
+ ValueContainer: ({ children }) => (
+ <>
+
+ {children}
+ >
+ ),
+ }}
/>
);