title: How can I position the tooltip to make it responsive?
body: <p>I'm trying to make a tooltip that should appear on the top of every navigation bar link and should also be responsive i.e when screen size is smaller than certain <code>px</code> say <code>350px</code> my navbar should appear vertically align and tooltip should appear on the left or right side of every link on hover.</p>
  <p>My navigation bar works perfectly on my Page. It's also responsive as it should be.</p>
  <p>PROBLEM:
  But tooltip is not working in smaller screen size as it should be. It shows on the top of <code>nav div</code> for all link but I want it to left or right side of the links on hover. Please help
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar ul{
      margin: 0;padding: 0;
      list-style-type: none;
      background-color: #333;
      overflow: hidden;
  }
  .navbar li {
      float: left;
      text-align: center;
  }
  .navbar li a, .dropbtn{
      display: inline-block;
      text-align: center;
      color: white;
      font-size:larger;
      padding: 12px 17px;
      text-decoration: none;
  }
  .navbar li a:hover {
      background-color: rgb(90, 81, 81);
      text-decoration: underline;
  }
  
  /*
  .navbar .dropdown{
      display: inline-block;
  }*/
  
  
  /*tooltip CSS*/
  .tooltip-text{
      position: absolute;
      display: inline-block;
      padding: 1px 3px;
      margin-left: -7px;
      top: -20px;
      text-align: center;
      background-color: #333;
      color: white;
      border: 0.5px solid black;
      border-radius: 2px;
      opacity: 0;
      transition: opacity 1s;
      z-index: 1;
  }
  
  .tooltip-text::after{
      content: "";
      position: absolute;
      top: 100%;margin-left: -5px;
      left: 50%;
      border-width: 6px;
      border-style: solid;
      border-color: #222 transparent transparent transparent;
  }
  
  .navbar li:hover .tooltip-text{
      visibility: visible;
      opacity: 1;
  }
  
  @media screen and (max-width:540px) {
      .navbar li {
          float: none;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;whatever&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;span class="tooltip-text"&gt;Go to Home&lt;/span&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="tooltip-text"&gt;Technology Page&lt;/span&gt;&lt;a href="#"&gt;Technology&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="tooltip-text"&gt;Entertainment Page&lt;/span&gt;&lt;a href="#"&gt;Entertainment&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="tooltip-text"&gt;Science Page&lt;/span&gt;&lt;a href="#"&gt;Science&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="tooltip-text"&gt;Sports Page&lt;/span&gt;&lt;a href="#"&gt;Sports&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="tooltip-text"&gt;About Page&lt;/span&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="tooltip-text"&gt;Contact Page&lt;/span&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>