Fix(web-react): Tooltip - fix reported bugs

- Fixed 'isOpen' prop for UncontrolledTooltip
lmc-eu · Jul 17, 2024 · f0d30cf · f0d30cf
1 parent 5e44a43
commit f0d30cf
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx b/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx
@@ -4,8 +4,8 @@ import Tooltip from './Tooltip';
 import { useTooltip } from './useTooltip';
 
 export const UncontrolledTooltip = (props: Omit<SpiritTooltipProps, 'onToggle'>) => {
-  const { children, ...restProps } = props;
-  const { isOpen, onToggle } = useTooltip();
+  const { children, isOpen: isOpenProp, ...restProps } = props;
+  const { isOpen, onToggle } = useTooltip(isOpenProp);
 
   return (
     <Tooltip {...restProps} isOpen={isOpen} onToggle={onToggle}>

diff --git a/packages/web-react/src/components/Tooltip/useTooltip.ts b/packages/web-react/src/components/Tooltip/useTooltip.ts
@@ -5,8 +5,8 @@ export interface UseTooltipReturn {
   onToggle: (isOpen: boolean) => void;
 }
 
-export const useTooltip = (): UseTooltipReturn => {
-  const [isOpen, setOpen] = useState<boolean>(false);
+export const useTooltip = (isOpenProp: boolean = false): UseTooltipReturn => {
+  const [isOpen, setOpen] = useState<boolean>(isOpenProp);
 
   return {
     isOpen,

diff --git a/packages/web-twig/src/Resources/components/Tooltip/README.md b/packages/web-twig/src/Resources/components/Tooltip/README.md
@@ -77,7 +77,7 @@ To display close button, add `isDismissible` prop to the `TooltipPopover` subcom
 
 ```html
 <Tooltip>
-  <button data-spirit-toggle="tooltip" data-spirit-target="my-tooltip-dismissible">I have a tooltip 😎</button>
+  <button data-spirit-toggle="tooltip" data-spirit-target="#my-tooltip-dismissible">I have a tooltip 😎</button>
   <TooltipPopover id="my-tooltip-dismissible" placement="right" isDismissible>Close me</TooltipPopover>
 </Tooltip>
 ```
@@ -91,7 +91,7 @@ This setup might be preferable when you have a link in your tooltip, for example
 
 ```html
 <Tooltip>
-  <button data-spirit-toggle="tooltip" data-spirit-target="my-tooltip-trigger">I have a tooltip 😎</button>
+  <button data-spirit-toggle="tooltip" data-spirit-target="#my-tooltip-trigger">I have a tooltip 😎</button>
   <TooltipPopover id="my-tooltip-trigger" trigger="click">
     <!-- Only `click` trigger is active now. -->
     You can click on the link: <a href="#">Link to unknown</a>
@@ -105,7 +105,7 @@ Advanced floating functionality is provided by JavaScript plugin and by [Floatin
 
 ```html
 <Tooltip>
-  <button data-spirit-toggle="tooltip" data-spirit-target="my-tooltip-advanced">I have a tooltip 😎</button>
+  <button data-spirit-toggle="tooltip" data-spirit-target="#my-tooltip-advanced">I have a tooltip 😎</button>
   <TooltipPopover
     closeLabel="Close tooltip"
     id="my-tooltip-advanced"