fix(tooltip): do not use native title when tooltip is off (#1196)

* fix(tooltip): do not use native title when tooltip is off

* Update src/components/tooltip/tooltip.spec.js

Co-Authored-By: Nicola Molinari <[email protected]>

* chore: pr comment

Author: montezume

src/components/tooltip/tooltip.js

@@ -140,19 +140,25 @@ const Tooltip = props => {
   }, [props.off, closeAfter, handleClose, toggle, isOpen]);
 
   const childrenProps = {
-    'aria-describedby': tooltipIsOpen ? id : null,
-    // for seo and accessibility, we add the tooltip's title
-    // as a native title when the title is hidden
-    title:
-      !tooltipIsOpen && typeof props.title === 'string' ? props.title : null,
-    ...props.children.props,
     // don't pass event listeners to children
     onFocus: null,
     onMouseOver: null,
     onMouseLeave: null,
     onBlur: null,
   };
 
+  const tooltipProps = !props.off
+    ? {
+        'aria-describedby': tooltipIsOpen ? id : null,
+        // for seo and accessibility, we add the tooltip's title
+        // as a native title when the title is hidden
+        title:
+          !tooltipIsOpen && typeof props.title === 'string'
+            ? props.title
+            : null,
+      }
+    : {};
+
   const eventListeners = !props.off
     ? {
         onMouseOver: handleEnter,
@@ -170,7 +176,10 @@ const Tooltip = props => {
   return (
     <React.Fragment>
       <WrapperComponent {...eventListeners} ref={reference.ref}>
-        {React.cloneElement(props.children, { ...childrenProps })}
+        {React.cloneElement(props.children, {
+          ...childrenProps,
+          ...tooltipProps,
+        })}
       </WrapperComponent>
       {tooltipIsOpen && (
         <TooltipWrapperComponent>

src/components/tooltip/tooltip.spec.js

@@ -430,8 +430,8 @@ describe('when off is true', () => {
 
     // should not be visible
     expect(queryByText('What kind of bear is best?')).not.toBeInTheDocument();
-    // should not remove title
-    expect(button).toHaveProperty('title', 'What kind of bear is best?');
+    // should not have title
+    expect(button).not.toHaveAttribute('title');
 
     fireEvent.blur(button);
 
@@ -447,8 +447,8 @@ describe('when off is true', () => {
 
     // should not be visible
     expect(queryByText('What kind of bear is best?')).not.toBeInTheDocument();
-    // should not remove title
-    expect(button).toHaveProperty('title', 'What kind of bear is best?');
+    // should not have title
+    expect(button).not.toHaveAttribute('title');
 
     fireEvent.mouseLeave(button);