Integrated tooltip popover directly into Tab component

Author: kosuke-k

src/scripts/Popover.tsx

@@ -4,13 +4,26 @@ import React, {
   FC,
   ReactNode,
   forwardRef,
+  useEffect,
 } from 'react';
 import classnames from 'classnames';
 import {
   AutoAlign,
   AutoAlignInjectedProps,
   RectangleAlignment,
 } from './AutoAlign';
+import { registerStyle } from './util';
+
+/**
+ *
+ */
+function useInitComponentStyle() {
+  useEffect(() => {
+    registerStyle('popover', [
+      ['.slds-popover_tooltip a', '{ color: white; }'],
+    ]);
+  }, []);
+}
 
 /**
  *
@@ -119,6 +132,8 @@ export const PopoverInner = forwardRef<
  */
 export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   ({ position, ...props }, ref) => {
+    useInitComponentStyle();
+
     const alignment: RectangleAlignment | undefined = position?.split('-') as
       | RectangleAlignment
       | undefined;

src/scripts/Tabs.tsx

@@ -1,5 +1,6 @@
 import React, {
   FC,
+  FocusEvent,
   ComponentType,
   HTMLAttributes,
   ReactElement,
@@ -11,12 +12,15 @@ import React, {
   useRef,
   useState,
   useEffect,
+  useCallback,
 } from 'react';
 import classnames from 'classnames';
 import { registerStyle } from './util';
 import { DropdownButton, DropdownButtonProps } from './DropdownButton';
 import { useControlledValue, useEventCallback } from './hooks';
 import { Bivariant } from './typeUtils';
+import { Button } from './Button';
+import { Popover } from './Popover';
 
 /**
  *
@@ -95,6 +99,37 @@ const TabMenu: FC<TabMenuProps> = (props) => {
   );
 };
 
+/**
+ *
+ */
+const TooltipContent = (props: { children: ReactNode; icon: string }) => {
+  const { children, icon } = props;
+  const [isHideTooltip, setIsHideTooltip] = useState(true);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const tooltipToggle = useCallback(() => {
+    setIsHideTooltip((hidden) => !hidden);
+  }, []);
+  const onBlur = useCallback((e: FocusEvent<HTMLElement>) => {
+    if (!popoverRef.current?.contains(e.relatedTarget)) {
+      setIsHideTooltip(true);
+    }
+  }, []);
+  return (
+    <span className='slds-dropdown-trigger react-slds-tooltip-content'>
+      <Button type='icon' icon={icon} onClick={tooltipToggle} onBlur={onBlur} />
+      <Popover
+        ref={popoverRef}
+        hidden={isHideTooltip}
+        tabIndex={-1}
+        onBlur={onBlur}
+        tooltip
+      >
+        {children}
+      </Popover>
+    </span>
+  );
+};
+
 /**
  *
  */
@@ -113,6 +148,7 @@ export type TabItemRendererProps = {
     (eventKey: TabKey, e: React.KeyboardEvent<HTMLAnchorElement>) => void
   >;
   tooltip?: ReactNode;
+  tooltipIcon?: string;
 };
 
 const DefaultTabItemRenderer: FC<{ children?: ReactNode }> = (props) => {
@@ -137,7 +173,14 @@ export type TabItemProps<RendererProps extends TabItemRendererProps> = {
 const TabItem = <RendererProps extends TabItemRendererProps>(
   props: TabItemProps<RendererProps>
 ) => {
-  const { title, eventKey, menu, menuIcon, tooltip } = props;
+  const {
+    title,
+    eventKey,
+    menu,
+    menuIcon,
+    tooltip,
+    tooltipIcon = 'info',
+  } = props;
   const { type, activeTabRef } = useContext(TabsContext);
   const activeKey = useContext(TabsActiveKeyContext);
   const { onTabClick, onTabKeyDown } = useContext(TabsHandlersContext);
@@ -194,9 +237,7 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
             {title}
           </a>
           {tooltip ? (
-            <span className='slds-dropdown-trigger react-slds-tooltip-content'>
-              {tooltip}
-            </span>
+            <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
           ) : null}
           {menuItems ? (
             <TabMenu icon={menuIcon} {...menuProps}>
@@ -293,7 +334,6 @@ function useInitComponentStyle() {
         '.react-slds-tooltip-content',
         '{ position: absolute; top: 0.6rem; right: 2.25rem; }',
       ],
-      ['.slds-popover_tooltip', '{ left: -1rem !important; }'],
       [
         '.react-slds-tab-menu button',
         '{ height: 2.5rem; line-height: 2rem; width: 2rem; visibility: hidden; justify-content: center }',

stories/Tabs.stories.tsx

@@ -1,12 +1,10 @@
-import React, { FocusEvent, useCallback, useRef, useState } from 'react';
+import React from 'react';
 import {
   Tabs,
   Tab,
   Icon,
   MenuItem,
   TabItemRendererProps,
-  Button,
-  Popover,
 } from '../src/scripts';
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
 
@@ -52,43 +50,6 @@ function CustomTabItemContent(props: TabItemRendererProps & { icon: string }) {
   );
 }
 
-function TooltipContent(props: { text: string }) {
-  const { text } = props;
-  const [isHideTooltip, setIsHideTooltip] = useState(true);
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const tooltipToggle = useCallback(() => {
-    setIsHideTooltip((hidden) => !hidden);
-  }, []);
-  const onIconBlur = useCallback((e: FocusEvent<HTMLElement>) => {
-    if (popoverRef.current !== e.relatedTarget) {
-      setIsHideTooltip(true);
-    }
-  }, []);
-  const onPopoverBlur = useCallback(() => {
-    setIsHideTooltip(true);
-  }, []);
-  return (
-    <>
-      <Button
-        type='icon'
-        icon='info'
-        onClick={tooltipToggle}
-        onBlur={onIconBlur}
-        title={text}
-      />
-      <Popover
-        ref={popoverRef}
-        hidden={isHideTooltip}
-        tabIndex={-1}
-        onBlur={onPopoverBlur}
-        tooltip
-      >
-        {text}
-      </Popover>
-    </>
-  );
-}
-
 /**
  *
  */
@@ -240,17 +201,37 @@ export const WithTooltipScoped: ComponentStoryObj<typeof Tabs> = {
         title='Tab 1'
         menuItems={createMenu()}
         tooltip={
-          <TooltipContent
-            text={'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'}
-          />
+          <div>
+            This is a tooltip for tab #1
+            <br />
+            <a
+              href='https://www.example.com/helllo?name=world'
+              target='_blank'
+              rel='noreferrer'
+            >
+              https://www.example.com/helllo?name=world
+            </a>
+          </div>
         }
       >
         This is in tab #1
       </Tab>
-      <Tab eventKey='2' title='Tab 2' menuItems={createMenu()}>
+      <Tab
+        eventKey='2'
+        title='Tab 2'
+        menuItems={createMenu()}
+        tooltip={<div>Warning!</div>}
+        tooltipIcon='warning'
+      >
         This is in tab #2
       </Tab>
-      <Tab eventKey='3' title='Tab 3' menuItems={createMenu()}>
+      <Tab
+        eventKey='3'
+        title='Tab 3'
+        menuItems={createMenu()}
+        tooltip={<div>Error!</div>}
+        tooltipIcon='error'
+      >
         This is in tab #3
       </Tab>
     </Tabs>