title: How to fix the position of a tooltip relative to textbox in HTML?
body: <p>A tool-tip is shown when I click inside of a text-box and the tool-tip disappears when I exit the text-box using the following JavaScript codes and CSS. The problem is the scrolling of the page. The position of tool-tip changes equal to the scrolling value. How can I fix the the position of a tool-tip relative to text-box in HTML?</p>
  
  <pre><code>    &lt;style type="text/css"&gt;
      .tooltip {
          visibility: hidden;
          position: fixed;
          width: 450px;
          top: 0;
          left: 0;
          z-index: 2;
          color: red;
          background-color: #ffffe6;
          font-family: 'B Yekan';
          font-size: 20px;
          text-align: center;
          padding: 1px;
          border: solid 1px;
          border-radius: 5px;
          overflow:auto;
      }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
      function tooltip_show(tooltipId, inputId) {
          var inputField = document.getElementById(inputId);
          var rectObject = inputField.getBoundingClientRect();
          var top = rectObject.top, left = rectObject.left;
          var it = document.getElementById(tooltipId);
          it.style.left = (left - it.offsetWidth / 2 + inputField.offsetWidth / 2) + 'px';
          it.style.top = (top + inputField.offsetHeight + 5) + 'px';
          var a = inputField.scrollTop;
          it.style.visibility = 'visible';
      }
      function tooltip_hide(tooltipId) {
          var it = document.getElementById(tooltipId);
          it.style.visibility = 'hidden';
      }
  &lt;/script&gt;
  </code></pre>