Merge pull request #8642 from weseek/imprv/prevent-tooltip-flickering

imprv: Prevent tooltip flickering
weseek · Mar 30, 2024 · 2fa592e · 2fa592e
2 parents 76d3591 + 870141b
commit 2fa592e
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 6 deletions.
diff --git a/apps/app/src/components/PageControls/BookmarkButtons.tsx b/apps/app/src/components/PageControls/BookmarkButtons.tsx
@@ -81,7 +81,7 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
           </span>
         </DropdownToggle>
       </BookmarkFolderMenu>
-      <UncontrolledTooltip placement="top" data-testid="bookmark-button-tooltip" target="bookmark-dropdown-btn" fade={false}>
+      <UncontrolledTooltip data-testid="bookmark-button-tooltip" target="bookmark-dropdown-btn" fade={false}>
         {t(getTooltipMessage())}
       </UncontrolledTooltip>
 

diff --git a/apps/app/src/components/PageControls/LikeButtons.tsx b/apps/app/src/components/PageControls/LikeButtons.tsx
@@ -54,7 +54,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         <span className={`material-symbols-outlined ${isLiked ? 'fill' : ''}`}>favorite</span>
       </button>
 
-      <UncontrolledTooltip data-testid="like-button-tooltip" placement="top" target="like-button" autohide={false} fade={false}>
+      <UncontrolledTooltip data-testid="like-button-tooltip" target="like-button" autohide={false} fade={false}>
         {t(getTooltipMessage())}
       </UncontrolledTooltip>
 

diff --git a/apps/app/src/components/PageControls/SeenUserInfo.tsx b/apps/app/src/components/PageControls/SeenUserInfo.tsx
@@ -2,7 +2,6 @@ import type { FC } from 'react';
 import React, { useState } from 'react';
 
 import type { IUser } from '@growi/core';
-import { FootstampIcon } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
 
@@ -40,7 +39,7 @@ const SeenUserInfo: FC<Props> = (props: Props) => {
           </div>
         </PopoverBody>
       </Popover>
-      <UncontrolledTooltip data-testid="seen-user-info-tooltip" placement="top" target="btn-seen-user" fade={false}>
+      <UncontrolledTooltip data-testid="seen-user-info-tooltip" target="btn-seen-user" fade={false}>
         {t('tooltip.footprints')}
       </UncontrolledTooltip>
     </div>

diff --git a/apps/app/src/components/PageControls/SubscribeButton.tsx b/apps/app/src/components/PageControls/SubscribeButton.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useCallback } from 'react';
+import type { FC } from 'react';
+import React, { useCallback } from 'react';
 
 import { SubscriptionStatusType } from '@growi/core';
 import { useTranslation } from 'next-i18next';
@@ -41,7 +42,7 @@ const SubscribeButton: FC<Props> = (props: Props) => {
         </span>
       </button>
 
-      <UncontrolledTooltip data-testid="subscribe-button-tooltip" placement="top" target="subscribe-button" fade={false}>
+      <UncontrolledTooltip data-testid="subscribe-button-tooltip" target="subscribe-button" fade={false}>
         {t(getTooltipMessage())}
       </UncontrolledTooltip>
     </>

diff --git a/apps/app/src/styles/atoms/_tooltip.scss b/apps/app/src/styles/atoms/_tooltip.scss
@@ -0,0 +1,3 @@
+.tooltip {
+  pointer-events: none;
+}
diff --git a/apps/app/src/styles/style-app.scss b/apps/app/src/styles/style-app.scss
@@ -7,6 +7,7 @@
 @import 'atoms/custom_control';
 @import 'atoms/code';
 @import 'atoms/tag';
+@import 'atoms/tooltip';
 
 // molecules
 @import 'molecules/toastr';