<p dir="auto">Hello,</p>
<p dir="auto">I am trying to use the tooltips on all my links, including the navbar. But as the navbar is fixed on top, I had to use the bottom position for the first rank links.</p>
<p dir="auto">The problem is that the tooltip-arrow was not above the tooltip but a bit below, almost behind for the first links and way below for the links of the dropdown list. I put the tooltip back to top for the dropdownlists but I can get the arrow at the right position for the first links.</p>
<p dir="auto">I found out that the .tooltip-arrow div got some css style="top:XXXpx;" (XXX depending of the link ranking)<br>
Just now, I managed to force the css back to "top:0px" using the 'shown.bs.tooltip' event (nothing happened with the 'show.bs.tooltip' event) so that the arrow shows at the wrong position a few moments before going back in place...  you can see the result here : <a href="http://www.theblacksmithshouse.be" rel="nofollow">www.theblacksmithshouse.be</a></p>
<p dir="auto">Two questions :</p>
<ul dir="auto">
<li>why does nothing happen with the 'show.bs.tooltip' ?</li>
<li>who's messing with that 'top' position ??</li>
</ul>
<p dir="auto">Thanks for your help</p>
<p dir="auto">OC</p>
<p dir="auto">When a tooltip/popover would appear slightly offscreen to the right or left, it's correctly shifted slightly however the arrow ends up appearing in the middle of the popover, rather than at the edge of it like it should.</p>
<p dir="auto">In this case, <code class="notranslate">getViewportAdjustedDelta</code> always returns <code class="notranslate">{top: 0, left: 0}</code> because <code class="notranslate">getCalculatedOffset</code> already made the correction to fit the tip on the page, however there are subsequent "delta.left" tests in <code class="notranslate">applyPlacement</code> to deduce left/right vs top/bottom positioning that will break in top/bottom mode.</p>
<p dir="auto">A fix would be to change the "delta.left" tests with a <code class="notranslate">horizShift</code> test, where <code class="notranslate">horizShift</code> is defined as:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var horizShift = !/right|left/.test(placement);"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">horizShift</span> <span class="pl-c1">=</span> <span class="pl-c1">!</span><span class="pl-pds"><span class="pl-c1">/</span>right<span class="pl-c1">|</span>left<span class="pl-c1">/</span></span><span class="pl-kos">.</span><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">placement</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">e.g.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var arrowPosition       = horizShift ? 'left'        : 'top'"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">arrowPosition</span>       <span class="pl-c1">=</span> <span class="pl-s1">horizShift</span> ? <span class="pl-s">'left'</span>        : <span class="pl-s">'top'</span></pre></div>