Prevent CSS tooltip from going out of page/window

Question

I have a CSS only tooltip which loads a span as a tooltip when you hover 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.

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.

JS fiddle at https://jsfiddle.net/gtoprh21/12/

Snippet:

$( ".ktooltip" )  .mouseover(function(e) {     var mousex = e.pageX + 20; //Get X coordinates     var mousey = e.pageY + 10; //Get Y coordinates     if((mousey+100)>$(window).height())     {        $('.tooltip')      .css({ top: mousey-100 ,left: mousex })       }     else if((mousex+200)>$(window).width())     {        $('.tooltip')      .css({ top: mousey ,left: mousex-200})       }     else      {     $('.tooltip')      .css({ top: mousey, left: mousex })        }  })

.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;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <p>   <span id="edtxt.trans1" class="tei l">My hope is in a bishop,   <!--link to a reference -->     <sup class="ref expl">       <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>         <!-- lhe reference in a tooltip -->         <span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>     </sup>    </span><br>    <span id="trans2" class="tei l">and in almighty God and his never-ending miracles.</span><br>    <span id="trans3" class="tei l">Generous Saint Nicholas holds an office,</span><br>    <span id="trans4" class="tei l">there is a gold symbol in his sign.      <!-- likn to ref -->      <sup class="ref expl">        <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">2</a>          <!-- the tooltip -->          <span class="ktooltiptext"> One of <span style="">Nicholas’s</span> symbols was three <sup>bags</sup> of gold <span style="font-variant: small-caps;">which</span> were the <span style="color: red;">dowry</span> he provided <span style="color: blue;">for</span> three <span style="color: green;">girls</span>          </span>      </sup>     </span><br>     </p>

Answer 1

Unfortunately, if you want to keep your tooltip good positioning, it isn't possible using only CSS.

Script solutions

But, as you're already using some script, I suggest you this solution:

• Use position: absolute to position the .ktooltiptext accordingly to .ref,
• Use the .getBoundingClientRect() method to easily get the position and size of the tooltip,
• Apply some correction if out of the window,
• Also made some modifications in CSS.

Snippet with only native JavaScript (avoiding jQuery, document will be lighter.)

var ktooltips = document.querySelectorAll(".ktooltip");  ktooltips.forEach(function(ktooltip, index){                // For each ktooltip    ktooltip.addEventListener("mouseover", position_tooltip); // On hover, launch the function below  })    function position_tooltip(){    // Get .ktooltiptext sibling    var tooltip = this.parentNode.querySelector(".ktooltiptext");        // Get calculated ktooltip coordinates and size    var ktooltip_rect = this.getBoundingClientRect();      var tipX = ktooltip_rect.width + 5; // 5px on the right of the ktooltip    var tipY = -40;                     // 40px on the top of the ktooltip    // Position tooltip    tooltip.style.top = tipY + 'px';    tooltip.style.left = tipX + 'px';      // Get calculated tooltip coordinates and size    var tooltip_rect = tooltip.getBoundingClientRect();    // Corrections if out of window    if ((tooltip_rect.x + tooltip_rect.width) > window.innerWidth) // Out on the right      tipX = -tooltip_rect.width - 5;  // Simulate a "right: tipX" position    if (tooltip_rect.y < 0)            // Out on the top      tipY = tipY - tooltip_rect.y;    // Align on the top      // Apply corrected position    tooltip.style.top = tipY + 'px';    tooltip.style.left = tipX + 'px';  }

.ref,  .refs {    position: relative;  }    .ktooltip {    display: inline-block;    text-indent: 0em;  }    .ref .ktooltiptext,  .refs .ktooltiptext {    visibility: hidden;    width: 200px;    background: #fff;    border-radius: 6px;    padding: 5px;       /* TAKIT: Changed here */    top: -999px;        /* TAKIT: Changed here */    left: -999px;       /* TAKIT: Changed here */    border: 2px solid grey;    line-height: normal;    position: absolute; /* TAKIT: Changed here */    z-index: 1;  }    .ref:hover .ktooltiptext,  .refs:hover .ktooltiptext {    visibility: visible;  }

<p>    <span id="edtxt.trans1" class="tei l">My hope is in a bishop,   <!--link to a reference -->     <sup class="ref expl">       <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>         <!-- the reference in a tooltip -->         <span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>    </sup>    </span><br>    <span id="trans2" class="tei l">and in almighty God and his never-ending miracles.</span><br>    <span id="trans3" class="tei l">Generous Saint Nicholas holds an office,</span><br>    <span id="trans4" class="tei l">there is a gold symbol in his sign.      <!-- link to ref -->      <sup class="ref expl">        <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">20</a>          <!-- the tooltip -->          <span class="ktooltiptext"> One of <span style="">Nicholas’s</span> symbols was three <sup>bags</sup> of gold <span style="font-variant: small-caps;">which</span> were the <span style="color: red;">dowry</span> he provided <span style="color: blue;">for</span>  three <span style="color: green;">girls</span>    </span>    </sup>    </span><br>  </p>

Snippet with jQuery

$(".ktooltip").mouseover(function(e) {    var tooltip = $(this).siblings('.ktooltiptext'); // Get tooltip element (ktooltiptext)    var tipX = $(this).outerWidth() + 5;             // 5px on the right of the ktooltip    var tipY = -40;                                  // 40px on the top of the ktooltip    tooltip.css({ top: tipY, left: tipX });          // Position tooltip      // Get calculated tooltip coordinates and size    var tooltip_rect = tooltip[0].getBoundingClientRect();    // Corrections if out of window    if ((tooltip_rect.x + tooltip_rect.width) > $(window).width()) // Out on the right      tipX = -tooltip_rect.width - 5; // Simulate a "right: tipX" position    if (tooltip_rect.y < 0)            // Out on the top      tipY = tipY - tooltip_rect.y;    // Align on the top      // Apply corrected position    tooltip.css({ top: tipY, left: tipX });   });

.ref,  .refs {    position: relative;  }    .ktooltip {    display: inline-block;    text-indent: 0em;  }    .ref .ktooltiptext,  .refs .ktooltiptext {    visibility: hidden;    width: 200px;    background: #fff;    border-radius: 6px;    padding: 5px;       /* TAKIT: Changed here */    top: -999px;        /* TAKIT: Changed here */    left: -999px;       /* TAKIT: Changed here */    border: 2px solid grey;    line-height: normal;    position: absolute; /* TAKIT: Changed here */    z-index: 1;  }    .ref:hover .ktooltiptext,  .refs:hover .ktooltiptext {    visibility: visible;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <p>    <span id="edtxt.trans1" class="tei l">My hope is in a bishop,   <!--link to a reference -->     <sup class="ref expl">       <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>         <!-- the reference in a tooltip -->         <span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>    </sup>    </span><br>    <span id="trans2" class="tei l">and in almighty God and his never-ending miracles.</span><br>    <span id="trans3" class="tei l">Generous Saint Nicholas holds an office,</span><br>    <span id="trans4" class="tei l">there is a gold symbol in his sign.      <!-- link to ref -->      <sup class="ref expl">        <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">20</a>          <!-- the tooltip -->          <span class="ktooltiptext"> One of <span style="">Nicholas’s</span> symbols was three <sup>bags</sup> of gold <span style="font-variant: small-caps;">which</span> were the <span style="color: red;">dowry</span> he provided <span style="color: blue;">for</span>  three <span style="color: green;">girls</span>    </span>    </sup>    </span><br>  </p>

With any of the above snippets, you can play with your window to see that the pop-up won't go outside on the right! It shouldn't go out on the top as well.

---

⋅ ⋅ ⋅

A CSS only suggestion

Now, if you don't care that much about the positioning of your tooltip, you can use this solution where I didn't change any of your HTML:

• Use position: relative; on the span elements to use it as a reference,
• Use position: absolute on the .ktooltiptext,
• Use top and left to position the .ktooltiptext as you wish.

Using that solution, the tooltip will keep its style, but would be aligned on the left, under the span element, so the tooltip should never go out on the right or on the top.

p span { /* TAKIT: Changed here */    position: relative;  }    .ktooltip {    display: inline-block;    text-indent: 0em;  }    .ref .ktooltiptext,  .refs .ktooltiptext {    visibility: hidden;    width: 200px;    background: #fff;    border-radius: 6px;    padding: 5px;       /* TAKIT: Simplified here */         border: 2px solid grey;    line-height: normal;    position: absolute; /* TAKIT: Changed */    top: 20px;          /* TAKIT: Changed */    left: 0;            /* TAKIT: Added to always align tooltip on the left of the span */     z-index: 1;  }    .ref:hover .ktooltiptext,  .refs:hover .ktooltiptext {    visibility: visible;  }

<p>    <span id="edtxt.trans1" class="tei l">My hope is in a bishop,   <!--link to a reference -->     <sup class="ref expl">       <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>         <!-- the reference in a tooltip -->         <span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>    </sup>    </span><br>    <span id="trans2" class="tei l">and in almighty God and his never-ending miracles.</span><br>    <span id="trans3" class="tei l">Generous Saint Nicholas holds an office,</span><br>    <span id="trans4" class="tei l">there is a gold symbol in his sign.      <!-- link to ref -->      <sup class="ref expl">        <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">20</a>          <!-- the tooltip -->          <span class="ktooltiptext"> One of <span style="">Nicholas’s</span> symbols was three <sup>bags</sup> of gold <span style="font-variant: small-caps;">which</span> were the <span style="color: red;">dowry</span> he provided <span style="color: blue;">for</span>  three <span style="color: green;">girls</span>    </span>    </sup>    </span><br>  </p>