fix(components): tooltips

output/components.eslint.txt

@@ -42,13 +42,19 @@ The react/require-extension rule is deprecated. Please use the import/extensions
 /home/travis/build/Talend/ui/packages/components/src/SubHeaderBar/SubHeaderBar.test.js
   4:8  error  'Container' is defined but never used  no-unused-vars
 
+/home/travis/build/Talend/ui/packages/components/src/TooltipTrigger/TooltipTrigger.component.js
+  258:13  error  'className' PropType is defined but prop is never used         react/no-unused-prop-types
+  260:20  error  'tooltipPlacement' PropType is defined but prop is never used  react/no-unused-prop-types
+  261:17  error  'tooltipHeight' PropType is defined but prop is never used     react/no-unused-prop-types
+  262:16  error  'tooltipWidth' PropType is defined but prop is never used      react/no-unused-prop-types
+
 /home/travis/build/Talend/ui/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.component.js
   166:3  error  Visible, non-interactive elements should not have mouse or keyboard event listeners  jsx-a11y/no-static-element-interactions
 
 /home/travis/build/Talend/ui/packages/components/src/VirtualizedList/utils/tablerow.js
   41:3  warning  Unexpected console statement  no-console
   69:2  error    Mixed spaces and tabs         no-mixed-spaces-and-tabs
 
-✖ 25 problems (22 errors, 3 warnings)
+✖ 29 problems (26 errors, 3 warnings)
   1 error, 0 warnings potentially fixable with the `--fix` option.
 

packages/components/src/ActionIntercom/__snapshots__/Intercom.component.test.js.snap

@@ -21,39 +21,34 @@ exports[`Intercom button should render a button 1`] = `
     label="Chat with Talend Support"
     tooltipPlacement="bottom"
   >
-    <div
+    <button
       aria-describedby={42}
-      className="theme-tc-tooltip"
+      className="btn btn-link tc-intercom theme-tc-intercom"
+      id="my-intercom"
+      key=".0"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onKeyPress={[Function]}
       onMouseOut={[Function]}
       onMouseOver={[Function]}
     >
-      <button
-        aria-describedby={42}
-        className="btn btn-link tc-intercom theme-tc-intercom"
-        id="my-intercom"
-        key=".0"
+      <Icon
+        name="talend-bubbles"
       >
-        <Icon
+        <svg
+          aria-hidden="true"
+          className="theme-tc-svg-icon tc-svg-icon"
+          focusable="false"
           name="talend-bubbles"
+          title={null}
         >
-          <svg
-            aria-hidden="true"
-            className="theme-tc-svg-icon tc-svg-icon"
-            focusable="false"
-            name="talend-bubbles"
-            title={null}
-          >
-            <use
-              xlinkHref="#talend-bubbles"
-            />
-          </svg>
-        </Icon>
-      </button>
-    </div>
+          <use
+            xlinkHref="#talend-bubbles"
+          />
+        </svg>
+      </Icon>
+    </button>
   </TooltipTrigger>
 </Intercom>
 `;

packages/components/src/Actions/ActionDropdown/__snapshots__/ActionDropdown.snapshot.test.js.snap

@@ -837,6 +837,12 @@ exports[`ActionDropdown should render icon only with hideLabel props 1`] = `
   i18n={Object {}}
   id="dropdown-id"
   key=".0"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyPress={[Function]}
+  onMouseOut={[Function]}
+  onMouseOver={[Function]}
   onSelect={[Function]}
   onToggle={[Function]}
   role="button"
@@ -886,8 +892,13 @@ exports[`ActionDropdown should render icon only with hideLabel props 1`] = `
             i18n={Object {}}
             id="dropdown-id"
             key=".0"
+            onBlur={[Function]}
             onClick={[Function]}
+            onFocus={[Function]}
             onKeyDown={[Function]}
+            onKeyPress={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
             open={false}
             role="button"
             useAnchor={false}
@@ -905,8 +916,13 @@ exports[`ActionDropdown should render icon only with hideLabel props 1`] = `
               disabled={false}
               i18n={Object {}}
               id="dropdown-id"
+              onBlur={[Function]}
               onClick={[Function]}
+              onFocus={[Function]}
               onKeyDown={[Function]}
+              onKeyPress={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
               role="button"
             >
               <button
@@ -918,8 +934,13 @@ exports[`ActionDropdown should render icon only with hideLabel props 1`] = `
                 disabled={false}
                 i18n={Object {}}
                 id="dropdown-id"
+                onBlur={[Function]}
                 onClick={[Function]}
+                onFocus={[Function]}
                 onKeyDown={[Function]}
+                onKeyPress={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
                 role="button"
                 type="button"
               >

packages/components/src/Badge/BadgeComposition/BadgeCategory/__snapshots__/BadgeCategory.component.test.js.snap

@@ -1,14 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BadgeCategory should render with the label 1`] = `
-<div class="theme-tc-tooltip"
-     aria-describedby="42"
+<span aria-label="my badge label"
+      class="tc-badge-category theme-tc-badge-category"
+      aria-describedby="42"
 >
-  <span aria-label="my badge label"
-        class="tc-badge-category theme-tc-badge-category"
-        aria-describedby="42"
-  >
-    my badge label
-  </span>
-</div>
+  my badge label
+</span>
 `;

packages/components/src/Badge/BadgeComposition/BadgeDelete/__snapshots__/BadgeDelete.component.test.js.snap

@@ -1,24 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BadgeDelete should render 1`] = `
-<div class="theme-tc-tooltip"
-     aria-describedby="42"
+<button role="button"
+        aria-label="Delete"
+        id="tc-badge-delete-my-id"
+        aria-describedby="42"
+        type="button"
+        class="tc-badge-delete-icon theme-tc-badge-delete-icon btn-icon-only btn btn-link"
 >
-  <button role="button"
-          aria-label="Delete"
-          id="tc-badge-delete-my-id"
-          aria-describedby="42"
-          type="button"
-          class="tc-badge-delete-icon theme-tc-badge-delete-icon btn-icon-only btn btn-link"
+  <svg name="talend-cross"
+       class="theme-tc-svg-icon tc-svg-icon"
+       focusable="false"
+       aria-hidden="true"
   >
-    <svg name="talend-cross"
-         class="theme-tc-svg-icon tc-svg-icon"
-         focusable="false"
-         aria-hidden="true"
-    >
-      <use xlink:href="#talend-cross">
-      </use>
-    </svg>
-  </button>
-</div>
+    <use xlink:href="#talend-cross">
+    </use>
+  </svg>
+</button>
 `;

packages/components/src/Badge/BadgeComposition/BadgeLabel/__snapshots__/BadgeLabel.component.test.js.snap

@@ -2,14 +2,10 @@
 
 exports[`BadgeLabel should default render 1`] = `
 <div class="tc-badge-label theme-tc-badge-label">
-  <div class="theme-tc-tooltip"
-       aria-describedby="42"
+  <span class="tc-badge-label-text theme-tc-badge-label-text"
+        aria-describedby="42"
   >
-    <span class="tc-badge-label-text theme-tc-badge-label-text"
-          aria-describedby="42"
-    >
-      my label
-    </span>
-  </div>
+    my label
+  </span>
 </div>
 `;

packages/components/src/Badge/__snapshots__/Badge.component.test.js.snap

@@ -4,15 +4,11 @@ exports[`Badge should render by default 1`] = `
 <div class="tc-badge theme-tc-badge tc-badge-display-large theme-tc-badge-display-large tc-badge-readonly theme-tc-badge-readonly">
   <div class="tc-badge-button theme-tc-badge-button">
     <div class="tc-badge-label theme-tc-badge-label">
-      <div class="theme-tc-tooltip"
-           aria-describedby="42"
+      <span class="tc-badge-label-text theme-tc-badge-label-text"
+            aria-describedby="42"
       >
-        <span class="tc-badge-label-text theme-tc-badge-label-text"
-              aria-describedby="42"
-        >
-          my label
-        </span>
-      </div>
+        my label
+      </span>
     </div>
   </div>
 </div>