diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json
index 9f98d14a68..253aace61e 100644
--- a/packages/docusaurus-theme-classic/package.json
+++ b/packages/docusaurus-theme-classic/package.json
@@ -42,7 +42,6 @@
"postcss": "^8.4.26",
"prism-react-renderer": "^2.3.0",
"prismjs": "^1.29.0",
- "react-popper": "^2.3.0",
"react-router-dom": "^5.3.4",
"rtlcss": "^4.1.0",
"tslib": "^2.6.0",
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index 9151c32759..87d0a1a2fa 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -287,16 +287,6 @@ declare module '@theme/Showcase/ShowcaseCard' {
export default function ShowcaseCard(props: Props): JSX.Element;
}
-declare module '@theme/Showcase/ShowcaseTooltip' {
- export interface Props {
- anchorEl?: HTMLElement | string;
- id: string;
- text: string;
- children: React.ReactElement;
- }
-
- export default function ShowcaseTooltip(props: Props): JSX.Element;
-}
declare module '@theme/Showcase/ShowcaseTagSelect' {
import {type ComponentProps, type ReactNode, type ReactElement} from 'react';
diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx
index 52a3e49cd8..9dbe5b58e8 100644
--- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx
@@ -11,7 +11,6 @@ import Link from '@docusaurus/Link';
import Translate, {translate} from '@docusaurus/Translate';
import FavoriteIcon from '@theme/Showcase/FavoriteIcon';
import Heading from '@theme/Heading';
-import Tooltip from '@theme/Showcase/ShowcaseTooltip';
import styles from './styles.module.css';
const Tags: {[type in TagType]: Tag} = {
@@ -174,17 +173,7 @@ function ShowcaseCardTag({tags}: {tags: TagType[]}) {
return (
<>
{tagObjectsSorted.map((tagObject, index) => {
- const id = `showcase_card_tag_${tagObject.tag}`;
-
- return (
-
-
-
- );
+ return ;
})}
>
);
diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/index.tsx
deleted file mode 100644
index 7087fa0e5d..0000000000
--- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/index.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, {useEffect, useState, useRef} from 'react';
-import ReactDOM from 'react-dom';
-import {usePopper} from 'react-popper';
-import styles from './styles.module.css';
-
-interface Props {
- anchorEl?: HTMLElement | string;
- id: string;
- text: string;
- children: React.ReactElement;
-}
-
-export default function Tooltip({
- children,
- id,
- anchorEl,
- text,
-}: Props): JSX.Element {
- const [open, setOpen] = useState(false);
- const [referenceElement, setReferenceElement] = useState(
- null,
- );
- const [popperElement, setPopperElement] = useState(null);
- const [arrowElement, setArrowElement] = useState(null);
- const [container, setContainer] = useState(null);
- const {styles: popperStyles, attributes} = usePopper(
- referenceElement,
- popperElement,
- {
- modifiers: [
- {
- name: 'arrow',
- options: {
- element: arrowElement,
- },
- },
- {
- name: 'offset',
- options: {
- offset: [0, 8],
- },
- },
- ],
- },
- );
-
- const timeout = useRef(null);
- const tooltipId = `${id}_tooltip`;
-
- useEffect(() => {
- if (anchorEl) {
- if (typeof anchorEl === 'string') {
- setContainer(document.querySelector(anchorEl));
- } else {
- setContainer(anchorEl);
- }
- } else {
- setContainer(document.body);
- }
- }, [container, anchorEl]);
-
- useEffect(() => {
- const showEvents = ['mouseenter', 'focus'];
- const hideEvents = ['mouseleave', 'blur'];
-
- const handleOpen = () => {
- // There is no point in displaying an empty tooltip.
- if (text === '') {
- return;
- }
-
- // Remove the title ahead of time to avoid displaying
- // two tooltips at the same time (native + this one).
- referenceElement?.removeAttribute('title');
-
- timeout.current = window.setTimeout(() => {
- setOpen(true);
- }, 400);
- };
-
- const handleClose = () => {
- clearInterval(timeout.current!);
- setOpen(false);
- };
-
- if (referenceElement) {
- showEvents.forEach((event) => {
- referenceElement.addEventListener(event, handleOpen);
- });
-
- hideEvents.forEach((event) => {
- referenceElement.addEventListener(event, handleClose);
- });
- }
-
- return () => {
- if (referenceElement) {
- showEvents.forEach((event) => {
- referenceElement.removeEventListener(event, handleOpen);
- });
-
- hideEvents.forEach((event) => {
- referenceElement.removeEventListener(event, handleClose);
- });
- }
- };
- }, [referenceElement, text]);
-
- return (
- <>
- {React.cloneElement(children, {
- ref: setReferenceElement,
- 'aria-describedby': open ? tooltipId : undefined,
- })}
- {container
- ? ReactDOM.createPortal(
- open && (
-
- {text}
-
-
- ),
- container,
- )
- : container}
- >
- );
-}
diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/styles.module.css
deleted file mode 100644
index 5500c818b6..0000000000
--- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/styles.module.css
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-.tooltip {
- border-radius: 4px;
- padding: 4px 8px;
- color: var(--site-color-tooltip);
- background: var(--site-color-tooltip-background);
- font-size: 0.8rem;
- z-index: 500;
- line-height: 1.4;
- font-weight: 500;
- max-width: 300px;
- opacity: 0.92;
-}
-
-.tooltipArrow {
- visibility: hidden;
-}
-
-.tooltipArrow,
-.tooltipArrow::before {
- position: absolute;
- width: 8px;
- height: 8px;
- background: inherit;
-}
-
-.tooltipArrow::before {
- visibility: visible;
- content: '';
- transform: rotate(45deg);
-}
-
-.tooltip[data-popper-placement^='top'] > .tooltipArrow {
- bottom: -4px;
-}
-
-.tooltip[data-popper-placement^='bottom'] > .tooltipArrow {
- top: -4px;
-}
diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx
index a79c0c6457..a80e6c7050 100644
--- a/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx
@@ -17,7 +17,6 @@ import Layout from '@theme/Layout';
import Heading from '@theme/Heading';
import FavoriteIcon from '@theme/Showcase/FavoriteIcon';
import ShowcaseCard from '@theme/Showcase/ShowcaseCard';
-import ShowcaseTooltip from '@theme/Showcase/ShowcaseTooltip';
import ShowcaseTagSelect from '@theme/Showcase/ShowcaseTagSelect';
import ShowcaseFilterToggle from '@theme/Showcase/ShowcaseFilterToggle';
import type {Operator} from '@theme/Showcase/ShowcaseFilterToggle';
@@ -297,36 +296,32 @@ function ShowcaseFilters({users}: {users: Users}) {
{TagList.map((tag, i) => {
- const {label, description, color} = Tags[tag];
+ const {label, color} = Tags[tag];
const id = `showcase_checkbox_id_${tag}`;
return (
-
-
-
- ) : (
-
- )
- }
- />
-
+ label={label}
+ // description={description} TODO
+ icon={
+ tag === 'favorite' ? (
+
+ ) : (
+
+ )
+ }
+ />
);
})}