Twitter Bootstrap Tooltip Not Aligning Correctly When It Is Going to Go Outside of Window

Twitter Bootstrap Tooltip not aligning correctly when it is going to go outside of window

Yes, others have encountered this before. For example, Issue #4125: Bad position of tooltip or Issue #3556: Tooltips near edge of window don't activate properly.

In the former it is suggested to either disable text wrapping or set a fixed height.

In the latter it is suggested (rather jestingly - but nevertheless potentially useful) to set a different positioning on tooltips you know are going to be near the window edge. E.g., placement: 'left' or placement: 'right'.

At this point there doesn't seem to be any impetus toward getting this handled in the repo.

Bootstrap tooltip in wrong position on initial hover, then in correct position

Here is a codepen of the original problem

I had made the position of the body 'relative' so that my child elements could be positioned absolutely in the way I wanted, and I also had set the the body's margin to '0 auto' to center the content. These styles interfered with the tooltip container option solution that Eric mentioned in his answer.

/*original css*/
body {
  position: relative;
  width: 980px;

  /*set as important to work in codepen example*/
  margin:0 auto !important;
}

#sample-menu{
  position: absolute;
  top: 109px;
  left: 600px;
}

//js that didn't solve tooptip positioning issue
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
    container: 'body'
  });
});

It was bad practice to have that styling applied to the body in the first place. Here is a codepen that solves this problem and still gives me the appearance and behavior I want without the tooltip issues. I added a container around the content to apply the styles, and then the tooltip "container: 'body' " solution that Eric G suggested worked.

/*new css with styling on a container div instead of the body*/
.container {
  position: relative;
  width: 980px;
  margin:0 auto;
}

#sample-menu{
  position: absolute;
  top: 109px;
  left: 600px;
}

//js now fixes the tooltip positioning issue
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
   container: 'body'
  });
});

Twitter Bootstrap Tooltip: flickers when placed on top of button, but works fine when placed at the left/right/bottom

I found a quick solution for my problem. Although relatively short, my initial tooltip description was getting split on two lines. By chance, I tried shortening the tooltip text to fit on a single line. Once this was done, the tooltip was properly displayed. Therefore, I am assuming there must be a problem with the length of the tooltip text and the fact that the button is displayed all the way to the right of the page (and at the top of the page). I will not investigate this further for the time being.

Prevent CSS tooltip from going out of page/window

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>

Show bootstrap tooltip after $().show()

This may be an issue with your css, check this, however if you just want to make sure that your code is executed exactly after the element is shown, then use this code

$(yourElement).show(0, function () {
 $(this).find('.tooltips').tooltip();
});

How to position bootstrap tooltip correctly next to a partially hidden image

Thanks to @y34h for the idea, but I had to calculate the correct value of left property specifically by overriding the actual bootstrap js code.

Here is the new Tooltip.getCalcultedOffset which is the function that calculates the absolute position of the tooltip:

    $.fn.tooltip.Constructor.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
    return placement === 'bottom' ? {
            top: pos.top + pos.height,
            left: pos.left + pos.width / 2 - actualWidth / 2 } :
        placement === 'top' ? {
            top: pos.top - actualHeight,
            left: pos.left + pos.width / 2 - actualWidth / 2 } :
        placement === 'left' ? {
            top: pos.top + pos.height / 2 - actualHeight / 2,
            left: pos.left - actualWidth } :
        /* placement == 'right' */ {
            top: pos.top + pos.height / 2 - actualHeight / 2,
            left:
                /* begin fix */
                Math.min(
                    pos.left + pos.width, //original left
                    $(".inner-container").offset().left + $(".inner-container")[0].clientWidth //max left
                )
                /* end fix */
        };
};

The actual change is enclosed in /* begin fix */ and /* end fix */

Here is the complete working code:

$.fn.tooltip.Constructor.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {        return placement === 'bottom' ? {                top: pos.top + pos.height,                left: pos.left + pos.width / 2 - actualWidth / 2 } :            placement === 'top' ? {                top: pos.top - actualHeight,                left: pos.left + pos.width / 2 - actualWidth / 2 } :            placement === 'left' ? {                top: pos.top + pos.height / 2 - actualHeight / 2,                left: pos.left - actualWidth } :            /* placement == 'right' */ {                top: pos.top + pos.height / 2 - actualHeight / 2,                left:                    /* begin fix */                    Math.min(                        pos.left + pos.width, //original left                        $(".inner-container").offset().left + $(".inner-container")[0].clientWidth //max left                    )                    /* end fix */            };    };
$("#outer-container").tooltip({   selector: "img",   placement: "right",   title: function () { return $(this).attr("alt"); }, });

#outer-container{  border: 1px solid;  padding: 10px;  width: 960px;  margin-left: auto;  margin-right: auto;  overflow: auto;}
.inner-container{  width: 600px;  overflow-x: auto;  border: 1px solid;  margin-bottom : 10px;  float: right;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="outer-container">  <div class="inner-container">    <figure>      <img src="http://i.imgur.com/mrXWW8S.png" alt="Man ALL IS LOŚ͖̩͇̗̪̏̈́T ALL IS LOST the pon̷y he comes he c̶̮omes he comes the ichor permeates all MY FACE MY FACE ᵒh god no NO NOO̼OO NΘ stop the an*̶͑̾̾̅ͫ͏̙̤g͇̫͛͆̾ͫ̑͆l͖͉̗̩̳̟̍ͫͥͨe̠̅s ͎a̧͈͖r̽̾̈́͒͑e not rè̑ͧ̌aͨl̘̝̙̃ͤ͂̾̆ ZA̡͊͠͝LGΌ ISͮ̂҉̯͈͕̹̘̱ TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ" />      <figcaption>        Image originally posted by <a href="http://meta.stackexchange.com/questions/213769/work-is-hard-lets-color-the-walls/213975#213975">Travis J</a>      </figcaption>    </figure>  </div>    <div class="inner-container">    <figure>      <img src="http://i.stack.imgur.com/CThCe.png" alt="Sanely-sized stackoverflow logo" />      <figcaption>Sanely-sized stackoverflow logo</figcaption>    </figure>  </div>    <div class="inner-container">    <figure>      <img src="http://i.stack.imgur.com/MvHsz.jpg" alt="Insanely-long-sized stackoverflow logo" />      <figcaption>Insanely-long-sized stackoverflow logo</figcaption>    </figure>  </div></div>

Bootstrap tooltip css not working

Sometimes you just have to call it and find a different solution. I couldnt understand why it wouldn't appear, (so indeed, it may have not been in that bootstrap version) so instead, i wrote my own tooltip with a bit of simple css. It's not the solution I wanted, but it solved my problem in the end.

Intrested?

.tooltip {
    position: relative;
    display: inline-block;
    font-size: 16px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
     position: absolute;
     z-index: 1;
    width: 120px;
    top: 100%;
     left: 50%; 
     margin-left: -60px; 
    font-size: 12px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

And the modified code

<a href="tel:<?php echo $phone;  ?>" class="tooltip">
    <span class="tooltiptext"><?php echo $phone; ?></span>
    <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
        <i class="fa fa-phone fa-stack-1x"></i>
    </span> 
</a>

Twitter Bootstrap Tooltip Not Aligning Correctly When It Is Going to Go Outside of Window