title: Prevent CSS tooltip from going out of page/window
body: <p>I have a CSS only tooltip which loads a <code>span</code> as a tooltip when you <code>hover</code> the link. However this is positioned with CSS but if the link is near to the top of a page or side then the tooltip goes off the side/top of the page.</p>
  
  <p>Is there a way with css to make this change or will I have to rely on JS?
  I have started to try to put something together with jQuery but would rather use CSS if possible.</p>
  
  <p>JS fiddle at <a href="https://jsfiddle.net/gtoprh21/12/" rel="noreferrer">https://jsfiddle.net/gtoprh21/12/</a></p>
  
  <p>Snippet:</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-js lang-js prettyprint-override"><code>$( ".ktooltip" )
  .mouseover(function(e) {
     var mousex = e.pageX + 20; //Get X coordinates
     var mousey = e.pageY + 10; //Get Y coordinates
     if((mousey+100)&gt;$(window).height())
     {
  
      $('.tooltip')
      .css({ top: mousey-100 ,left: mousex })
  
     }
     else if((mousex+200)&gt;$(window).width())
     {
        $('.tooltip')
      .css({ top: mousey ,left: mousex-200})
  
     }
     else
      {
     $('.tooltip')
      .css({ top: mousey, left: mousex })
  
      }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ref, .refs {
    position:relative;
  }
  /*added a text indent to overide indent styles further down*/
  .ktooltip {
      display: inline-block;
      text-indent:0em;
  }
  
  .ref .ktooltiptext, .refs .ktooltiptext {
    visibility:hidden;
    width: 200px;
    background: #fff;
    border-radius: 6px;
    padding: 5px 5px;
    top: -40px;
    left: 10px;
    border:2px solid grey;
    line-height: normal;
  
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
  }
  
  .ref:hover .ktooltiptext, .refs:hover .ktooltiptext {
      visibility: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p&gt;
   &lt;span id="edtxt.trans1" class="tei l"&gt;My hope is in a bishop,
   &lt;!--link to a reference --&gt;
     &lt;sup class="ref expl"&gt;
       &lt;a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip"&gt;1&lt;/a&gt;
         &lt;!-- lhe reference in a tooltip --&gt;
         &lt;span class="ktooltiptext"&gt;According to tradition &lt;span style="name"&gt;Nicholas&lt;/span&gt; was bishop of Myra in Lycia (south-west Turkey today).&lt;/span&gt;
     &lt;/sup&gt;
    &lt;/span&gt;&lt;br&gt;
    &lt;span id="trans2" class="tei l"&gt;and in almighty God and his never-ending miracles.&lt;/span&gt;&lt;br&gt;
    &lt;span id="trans3" class="tei l"&gt;Generous Saint Nicholas holds an office,&lt;/span&gt;&lt;br&gt;
    &lt;span id="trans4" class="tei l"&gt;there is a gold symbol in his sign.
      &lt;!-- likn to ref --&gt;
      &lt;sup class="ref expl"&gt;
        &lt;a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip"&gt;2&lt;/a&gt;
          &lt;!-- the tooltip --&gt;
          &lt;span class="ktooltiptext"&gt; One of &lt;span style=""&gt;Nicholas’s&lt;/span&gt; symbols was three &lt;sup&gt;bags&lt;/sup&gt; of gold &lt;span style="font-variant: small-caps;"&gt;which&lt;/span&gt; were the &lt;span style="color: red;"&gt;dowry&lt;/span&gt; he provided &lt;span style="color: blue;"&gt;for&lt;/span&gt; three &lt;span style="color: green;"&gt;girls&lt;/span&gt;
          &lt;/span&gt;
      &lt;/sup&gt;
     &lt;/span&gt;&lt;br&gt;
     &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>