title: Tooltip- how can I make it taller not wider?
body: <p>I have a question regarding the tooltip I have used from w3schools.com</p>
  <p>I have it entirely in CSS but have the problem, that when it shows at the edge of a side, it cuts the tooltip off.</p>
  <p>My ideal thing would be, that it detects when the side is stopping and it makes the given div taller, not wider.</p>
  <p><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>.tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      font-size: 20px;
      color: darkslategrey;
  }
  
      .tooltip .tooltiptext {
          visibility: hidden;
          width: 260px;
          background-color: darkslategrey;
          color: #fff;
          text-align: center;
          border-radius: 6px;
          padding: 16px 0;
          position: absolute;
          z-index: 1;
          bottom: 125%;
          left: 50%;
          margin-left: -80px;
         
          position: absolute;
          z-index: 1;
          font-size: 16px;
          
      }
  
      .tooltip:hover .tooltiptext {
          visibility: visible;
         
      }
       .tooltiptext {
  
           text-shadow:none;
       }
  
  .tooltip .tooltiptext:after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: darkslategrey transparent transparent transparent;
      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="tooltip"&gt;The highlighted word&lt;span class="tooltiptext"&gt;The text in my tooltip&lt;/span&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thank you for any kind of help, where I could begin.</p>