title: tooltip for icon buttons in material ui list item is not working as expected
body: <p>I'm very new to Material UI and React. I've got a very odd UI issue and I'm hoping someone here can point out what I did wrong.</p>
  
  <p><strong>What I am doing:</strong>
  I have a List. For each list items, I want some button to point to different URLs. Here's the code of my list. This is somewhat pseudo code. Each "list item" is generated using map that goes over a data saved in JSON format:</p>
  
  <pre><code>&lt;List&gt;
     &lt;ListItem button component="a" href={infoUrl}&gt;
              &lt;ListItemAvatar&gt;
                  &lt;Avatar src={itemIcon} /&gt;
              &lt;/ListItemAvatar&gt;
              &lt;ListItemText 
                  primary={this.props.project.name_with_namespace} 
                  secondary={this.props.project.description}
              /&gt;
              &lt;ListItemSecondaryAction&gt;
                  &lt;Tooltip id="button-report" title="Report"&gt;
                      &lt;IconButton area-label="Report" href={reportUrl}&gt;
                          &lt;AssessmentIcon /&gt;
                      &lt;/IconButton&gt;
                  &lt;/Tooltip&gt;
                  &lt;Tooltip id="button-codeRepo" title="Code Repository"&gt;
                      &lt;IconButton area-label="Code Repository" href={repoUrl}&gt;
                          &lt;CodeIcon /&gt;
                      &lt;/IconButton&gt;
                  &lt;/Tooltip&gt;
              &lt;/ListItemSecondaryAction&gt;
          &lt;/ListItem&gt;
     &lt;/List&gt;
  </code></pre>
  
  <p><strong>Problem</strong>:
  The list is showing up with all the list items. Primary and Secondary texts as well as the avatars for each list item is also showing up properly, including the 2 "IconButton".</p>
  
  <p>The problem is the tooltip that was added to the <code>IconButton</code> under the <code>ListItemSecondaryAction</code>. For the very first list item, everything is good. For all the other list items, I have to move my mouse pointer to the bottom edge of the icon buttons in order to be able to <strong>Click</strong> and also see the tooltip.</p>
  
  <p>If I remove the tooltips completely, I don't have any issue with the clicks. I can move the mouse pointer to the middle or other areas within the circular ring of the icon buttons and perform a click.</p>
  
  <p>Am I not using the <code>Tooltip</code> properly here? Tried both Chrome and FireFox and seeing the same issue.</p>