title: JavaScript custom tooltip of Grid not visible within viewport
body: <p>I have created a custom tooltip for my radgrid because I have a requirement to display 5000 character in tooltip.</p>
  <p>I have done with all my requirement, but got stuck when I mouseover the last row of the grid it displays tooltip below the viewport, unable to view complete tooltip. My code is below. How can I adjust those tooltip to display within viewport only?</p>
  <pre><code>&lt;radG:GridTemplateColumn DataField=&quot;Remarks&quot; HeaderText=&quot;Update / Remark&quot; UniqueName=&quot;UpdateRemarks&quot;&gt;
                              &lt;ItemTemplate&gt;
                                  &lt;asp:Label ID=&quot;lblRemarks&quot; runat=&quot;server&quot; CssClass=&quot;tooltip&quot; Text='&lt;%#Eval(&quot;Remarks&quot;)%&gt;'
                                      ToolTip='&lt;%#Eval(&quot;FullRemarks&quot;)%&gt;' onmouseover=&quot;showTooltip(this)&quot;
                                      onmouseout=&quot;hideTooltip(this)&quot;&gt;&lt;/asp:Label&gt;
  
                              &lt;/ItemTemplate&gt;
                              &lt;HeaderStyle Width=&quot;200px&quot; /&gt;
                              &lt;ItemStyle CssClass=&quot;wraptext&quot; /&gt;
                          &lt;/radG:GridTemplateColumn&gt;
  </code></pre>
  <p>For JavaScript functions:</p>
  <pre><code>function showTooltip(control) {
      var ttext = control.title;
      var tt = document.createElement('SPAN');
      var tnode = document.createTextNode(ttext);
      tt.appendChild(tnode);
      control.parentNode.insertBefore(tt, control.nextSibling);
      tt.className = &quot;tooltipCss&quot;;
      control.title = &quot;&quot;;
  }
  function hideTooltip(control) {
      var ttext = control.nextSibling.childNodes[0].nodeValue;
      control.parentNode.removeChild(control.nextSibling);
      control.title = ttext;
  }
  </code></pre>
  <p>and for CSS:</p>
  <pre><code> .tooltipCss
  {
      position: absolute;
      border: 1px solid gray;
      margin1: 1em;
      padding: 1px;
      background: white;
      font-family: Arial;
      font-weight: normal;
      color: blue;
      font-size: 9px;
      /*width: 400px;
      max-height: 250px;
      overflow-y: scroll;*/
      text-wrap: normal;
      border-radius: 2px 2px 2px 2px;
  }
  </code></pre>