title: Material Design Lite blocks my tooltip from showing
body: <p>the mdl class mdl-layout__content is blocking my tooltip from showing in my graph. I made a codepen that shows the problem.  Are there style settings I can make to still use this class for my nav, but show my tooltip.</p>
  
  <p><a href="https://codepen.io/brbeardm/pen/JJaaPY?editors=1000" rel="nofollow noreferrer">Link to CodePen that shows the issue</a></p>
  
  <p>here's my HTML code</p>
  
  <pre><code>    &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="description" content="A front-end template that helps you build fast, modern mobile web apps."&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"&gt;
  
      &lt;title&gt;New UI 07052017&lt;/title&gt;
      &lt;link href="css/layout.css" rel="stylesheet" type="text/css"&gt;
  
      &lt;!-- Material Design Lite
      &lt;link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css"&gt; --&gt;
      &lt;link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.orange-indigo.min.css"&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;      
      &lt;!-- &lt;link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"&gt; --&gt;
      &lt;link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="css/angular-toggle-switch-bootstrap-3.css" type="text/css" media="screen"&gt;
      &lt;link href="css/bootstrap-material-design.css" rel="stylesheet"&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"&gt;&lt;/script&gt;
  
      &lt;script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.resize.js"&gt;&lt;/script&gt;
  
      &lt;!--&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"&gt;&lt;/script&gt; **** updated to 1.6.1 on 6/29/17--&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- &lt;script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"&gt;&lt;/script&gt; --&gt;
      &lt;script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"&gt;&lt;/script&gt;
  
      &lt;!-- &lt;script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"&gt;&lt;/script&gt; --&gt;
      &lt;script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/angular-toggle-switch.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/angularScripts.js"&gt;&lt;/script&gt;
  
      &lt;!-- JustGage tools for the dashboard --&gt;
      &lt;script src="js/justgage.js"&gt;&lt;/script&gt;
  
  
      &lt;script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"&gt;&lt;/script&gt;
      &lt;script defer src="https://code.getmdl.io/1.1.3/material.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Add to homescreen for Chrome on Android --&gt;
      &lt;meta name="mobile-web-app-capable" content="yes"&gt;
      &lt;link rel="icon" sizes="192x192" href="images/android-icon-192x192.png"&gt;
  
      &lt;!-- Add to homescreen for Safari on iOS --&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
      &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt;
      &lt;meta name="apple-mobile-web-app-title" content="Pellet Pirate"&gt;
      &lt;link rel="apple-touch-icon-precomposed" href="images/apple-icon-114x114.png"&gt;
  
      &lt;!-- Tile icon for Win8 (144x144 + tile color) --&gt;
      &lt;meta name="msapplication-TileImage" content="images/apple-icon-144x144.png"&gt;
      &lt;meta name="msapplication-TileColor" content="#3372DF"&gt;
  
      &lt;link rel="shortcut icon" href="images/pelletpirate-icon-32x32.png"&gt;
  
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;amp;lang=en"&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
      &lt;link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.cyan-light_blue.min.css"&gt;
      &lt;link rel="stylesheet" href="css/styles.css"&gt;
  
      &lt;!-- Import and configure the Firebase SDK --&gt;
      &lt;!-- These scripts are made available when the app is served or deployed on Firebase Hosting --&gt;
      &lt;!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup --&gt;
      &lt;script src="/__/firebase/4.0.0/firebase-app.js"&gt;&lt;/script&gt;
      &lt;script src="/__/firebase/4.0.0/firebase-auth.js"&gt;&lt;/script&gt;
      &lt;script src="/__/firebase/init.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
          #view-source {
          position: fixed;
          display: block;
          right: 0;
          bottom: 0;
          margin-right: 40px;
          margin-bottom: 40px;
          z-index: 900;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-app="PelletPirate"&gt;
          &lt;div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"&gt;
          &lt;header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600"&gt;
              &lt;div class="mdl-layout__header-row"&gt;
                  &lt;span class="mdl-layout-title"&gt;smoker&lt;/span&gt;
                  &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                  &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"&gt;
                          &lt;label class="mdl-button mdl-js-button mdl-button--icon" for="search"&gt;
                          &lt;i class="material-icons"&gt;search&lt;/i&gt;
                          &lt;/label&gt;
                          &lt;div class="mdl-textfield__expandable-holder"&gt;
                          &lt;input class="mdl-textfield__input" type="text" id="search"&gt;
                          &lt;label class="mdl-textfield__label" for="search"&gt;Enter your query...&lt;/label&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn"&gt;
                          &lt;i class="material-icons"&gt;more_vert&lt;/i&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/header&gt;
  
          &lt;div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50"&gt;
                  &lt;header class="demo-drawer-header"&gt;
  
  
  
  
                  &lt;/header&gt;
                  &lt;nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800"&gt;
                      &lt;a class="mdl-navigation__link" href=""&gt;&lt;i class="mdl-color-text--blue-grey-400 material-icons" role="presentation"&gt;whatshot&lt;/i&gt;Manage a Cook&lt;/a&gt;
                      &lt;a class="mdl-navigation__link" href=""&gt;&lt;i class="mdl-color-text--blue-grey-400 material-icons" role="presentation"&gt;inbox&lt;/i&gt;Inbox&lt;/a&gt;
                      &lt;a class="mdl-navigation__link" href=""&gt;&lt;i class="mdl-color-text--blue-grey-400 material-icons" role="presentation"&gt;delete&lt;/i&gt;Trash&lt;/a&gt;
                      &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                      &lt;a class="mdl-navigation__link" href=""&gt;&lt;i class="mdl-color-text--blue-grey-400 material-icons" role="presentation"&gt;help_outline&lt;/i&gt;
                      &lt;span class="visuallyhidden"&gt;Help&lt;/span&gt;&lt;/a&gt;
                  &lt;/nav&gt;
          &lt;/div&gt;
  
  
  
  
  
  
  
  &lt;!-- *********************************************************************************************************************--&gt;
  
  &lt;!-- need help here. I'm not sure what settings to make in CSS to enable the tooltip popup to show. If I comment out the  --&gt;
  &lt;!-- the mdl-layout__content class then the tooltips show but my graph now drifts left behind my left nav --&gt;
  
  &lt;!-- *********************************************************************************************************************--&gt;
  
          &lt;main class="mdl-layout__content mdl-color--grey-100"&gt;
          &lt;!-- &lt;main class="mdl-color--grey-100"&gt; --&gt;
  
  
              &lt;div class="mdl-grid demo-content"&gt;
  
                  &lt;div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col"&gt;
  
                      &lt;div class="plot-container"&gt;
                          &lt;div id="temp-placeholder" class="plot-placeholder"&gt;&lt;/div&gt;
                      &lt;/div&gt;
  
  
                  &lt;/div&gt;
  
                  &lt;div class="row" id="ControlsRow"&gt;
                      &lt;div class="mdl-cell mdl-cell--12-col"&gt;
                          &lt;div class="plot-container"&gt;
                              &lt;div id="controls-placeholder" class="plot-placeholder"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
              &lt;/div&gt;
  
              &lt;footer class="mdl-mini-footer"&gt;
                  &lt;div class="mdl-mini-footer--middle-section"&gt;
                      &lt;div class="mdl-logo"&gt;"It's a Pirate's life for me."&lt;/div&gt;
                      &lt;ul class="mdl-mini-footer--link-list"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Privacy &amp; Terms&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/footer&gt;
          &lt;/main&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    // Initialize Firebase
    var config = {
      apiKey: "AIzaSyD3_xJ0aYVK3VwjuuliOdb6t5wbbi87RB8",
      authDomain: "pelletpirate.firebaseapp.com",
      databaseURL: "https://pelletpirate.firebaseio.com",
      projectId: "pelletpirate",
      storageBucket: "pelletpirate.appspot.com",
      messagingSenderId: "731610976061"
    };
    firebase.initializeApp(config);
    var Ref = firebase.database().ref()
  &lt;/script&gt;
  
  &lt;script src="js/scripts.js"&gt;&lt;/script&gt;
  &lt;script src="js/Cscripts.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>