[Tooltip] Zero-length titles string are never displayed

mui · Jan 6, 2018 · dfcfe88 · dfcfe88
1 parent c3948a8
commit dfcfe88
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/pages/api/tooltip.md b/pages/api/tooltip.md
@@ -25,7 +25,7 @@ filename: /src/Tooltip/Tooltip.js
 | open | bool |  | If `true`, the tooltip is shown. |
 | placement | enum:&nbsp;'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top'<br> | 'bottom' | Tooltip placement |
 | PopperProps | object |  | Properties applied to the `Popper` element. |
-| <span style="color: #31a148">title *</span> | node |  | Tooltip title. |
+| <span style="color: #31a148">title *</span> | node |  | Tooltip title. Zero-length titles string are never displayed. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

diff --git a/src/Tooltip/Tooltip.js b/src/Tooltip/Tooltip.js
@@ -270,9 +270,13 @@ class Tooltip extends React.Component {
 
     const themeDirection = theme && theme.direction;
     const placement = themeDirection === 'rtl' ? flipPlacement(rawPlacement) : rawPlacement;
-    const open = this.isControlled ? openProp : this.state.open;
+    let open = this.isControlled ? openProp : this.state.open;
     const childrenProps = {};
 
+    if (title === '') {
+      open = false;
+    }
+
     childrenProps['aria-describedby'] = id;
 
     if (!disableTriggerTouch) {
@@ -437,7 +441,7 @@ Tooltip.propTypes = {
    */
   theme: PropTypes.object.isRequired,
   /**
-   * Tooltip title.
+   * Tooltip title. Zero-length titles string are never displayed.
    */
   title: PropTypes.node.isRequired,
 };

diff --git a/src/Tooltip/Tooltip.spec.js b/src/Tooltip/Tooltip.spec.js
@@ -77,6 +77,17 @@ describe('<Tooltip />', () => {
     assert.strictEqual(popperChildren.childAt(0).hasClass(classes.tooltip), true);
   });
 
+  describe('prop: title', () => {
+    it('should not display if the title is an empty string', () => {
+      const wrapper = shallow(
+        <Tooltip open title="">
+          <span>Hello World</span>
+        </Tooltip>,
+      );
+      assert.strictEqual(wrapper.find(Popper).hasClass(classes.popperClose), true);
+    });
+  });
+
   describe('prop: placement', () => {
     it('should have top placement', () => {
       const wrapper = shallow(