The position of the tooltip element is not centered when the body scrollbar is displayed.

[Rudi-Batubara]

I am using

Native Javascript for Bootstrap 4 v2.0.23

and found all positions of tooltip element not really centered when body scrollbar is displayed. Is there a practical way to fix this bug?

Bug preview :

Fine preview:

Could you please help me to fix this bug ?

[thednp]

Depends if the "issue" is an user-related issue or not. We would like to see some markup so I can make an idea.

[Rudi-Batubara]

This is my markup :

Wrapper:

<section class="collapse navbar-collapse" id="navbarCollapse"></section>

Parent wrapper:

<ul class="navbar-nav ml-auto mr-md-3"></ul>

Items:

<li> <a class="nav-link" href="{{ route('upload.create') }}" data-toggle="tooltip" data-placement="bottom" title="Upload video"> <svg version="1.1" class="icon-24 d-block" width="24" height="24" role="img" aria-label="video video-desc"> <title id="video">Navbar video</title> <desc id="video-desc">Navbar video icon</desc> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ secure_asset('img/icons.svg') }}#video"></use> </svg> </a> </li>

<li class="dropdown"><a class="nav-link" href="javacript:void(0)" id="dropdownCart" data-toggle="dropdown" data-persist="true" aria-haspopup="true" aria-expanded="false"> <svg version="1.1" class="icon-24 d-block" width="24" height="24" role="img" aria-label="nav-shop nav-shop-desc"> <title id="nav-shop">Shop</title> <desc id="nav-shop-desc">Shopping icon</desc> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ secure_asset('img/icons.svg') }}#shop"></use> </svg> </a><ul class="dropdown-menu dropdown-menu-right p-0 shadowed" aria-labelledby="dropdownCart">...<ul></li>

[thednp]

@Rudi-Batubara why not make a codepen or fiddle so we can see this in a real world?

[duduik]

Similar issue, but when the scrollbar is not displayed.
https://jsfiddle.net/s17304Lf/2/

[thednp]

@duduik I can't explain that, have no idea how to fix that case.

[thednp]

@Rudi-Batubara I'm currently investigating that case and I cannot confirm that to be an issue. The issue @duduik posted is confirmed so far.

[duduik]

It works on https://jsfiddle.net/wcxkvL53/1/.

But on a slightly different markup (the button wrapped with div), the issue appear again. https://jsfiddle.net/wcxkvL53/.

Thank you.

[thednp]

I suggest you stick to the previous markup for now, we can't check the entire document for a tooltip can we? I hope we can find a reliable solution as soon as possible.

[thednp]

I would like to add an important comment on the issue.

As we know the original plugin makes use of the popper.js library to process the placement of Tooltip, Popover and Dropdown and I came to the conclusion that our 20-30 lines styleTip() utility may never be able to achieve the same effect as the third party library such as popper.js.

The most important thing is, our library was never designed to do every feature of the original jQuery plugins, especially this kind of quirks with special markup. This library provides a certain set of features in a way to enable long term maintenance, keeping the code in check on size and consistency.

Now I need to know @Rudi-Batubara is your original issue solved with latest code in the master branch?

[Rudi-Batubara]

the issue has been solved, the issue comes from my bad DOM structure. When I changed the structure of my DOM and fixed a number of styles, it worked well. Just like what @duduik did.

Thank you, @thednp GBU~

I hope, in this new version it will be better

[Gruven]

@thednp the problem only partially solved. When inner div is from "91vh" to "99vh" it doesn't work as expected...
https://jsfiddle.net/Gruven/ejfpr21g/6/

[thednp]

@Gruven that issue is expected because we don't implement popper.js.

I am open to any suggestion on how to reliably manage the vh based popover/tooltip target containers.

[Gruven]

@thednp this not about vh based containers. This bug appears when body height is close to the bottom of viewport.
https://jsfiddle.net/Gruven/ejfpr21g/7/
Try changing body height and you'll see.
Looks like tooltip changes its position too early.

[thednp]

@Gruven it's not a bug, it's a case not handled yet, that's why I say we're open to suggestions.

[Gruven]

@thednp do you know why rect from utils

bootstrap.native/lib/V4/utils.js

Line 248 in 92ccb11

rect = link[getBoundingClientRect](),

and rect from my custom script

const testBtn = document.getElementById('filter-collapse-button');
if (testBtn) {
  testBtn.addEventListener('mouseover', () => {
    console.log(testBtn['getBoundingClientRect']());
  });
}

returns different values when this case appears?

DOMRect { x: 1741, y: 80, width: 42, height: 38, top: 80, right: 1783, bottom: 118, left: 1741 }
DOMRect { x: 1729, y: 80, width: 42, height: 38, top: 80, right: 1771, bottom: 118, left: 1729 }

[Gruven]

@thednp success! It works! Please, add after this

bootstrap.native/lib/V4/tooltip-native.js

Line 80 in 92ccb11

tooltip[setAttribute]('role',component);

this lines or similar

        tooltip['style']['left'] = '0';
        tooltip['style']['top'] = '0';

[thednp]

@Gruven the difference comes from two moments in time:

• first is the moment when user hovers the tooltip/popover target
• second is the moment when all calculation is done and we're ready to ship the markup to the DOM

For some reason, Tooltip component changes the values of the viewport like offsetHeight or clientHeight making it sometimes impossible to know if we're actually working with an overflow viewport or not.

About your suggestion, please make it clear what exactly is the suggested change, because I don't understand the need to set position for top and left to 0.

[Gruven]

@thednp as I understood:

1. Tooltip element creates
2. Tooltip appends to container
3. Rect calculating
4. Tooltip position changes

We need to set init position for tooltip between steps 2 and 3, because it takes some space within container, so scroll appears on some moment.

[thednp]

@Gruven not exactly, if you read the code, you will actually find:

• tooltip is created
• tooltip is appended to the DOM
• tooltip is positioned relative to it's target
• tooltip is displayed

But I think you make a good point in a comment above, setting top and left positions to ZERO before adding it to the DOM, because Bootstrap 4 uses popper.js and thus is doesn't need these coordinates to be set in the CSS like Bootstrap 3.

[Gruven]

@thednp no, after appending it is already displayed. After this line

bootstrap.native/lib/V4/tooltip-native.js

Line 120 in 92ccb11

if(createToolTip() !== false) {

Tooltip appears at the bottom of the container with "position: absolute", "display: block" and "opacity: 0". (screenshots - https://send.firefox.com/download/2d0e1142c769ab83/#cEniBIy_X_V3vBMYPs_28g )
So let's see the next line

bootstrap.native/lib/V4/tooltip-native.js

Line 121 in 92ccb11

updateTooltip();

And then to the next

bootstrap.native/lib/V4/tooltip-native.js

Line 97 in 92ccb11

styleTip(element, tooltip, placementSetting, parentObject);

This sent us to var declaration, where rect is calculating

bootstrap.native/lib/V4/utils.js

Line 248 in 92ccb11

rect = link[getBoundingClientRect](),

By that time tooltip already appended and displayed with "opacity: 0". Scroll is displayed too. So we get wrong calculation of rect values.

[Gruven]

@thednp I think a better solution will be something like "left: -{tooltipOuterWidth}px" and "top: -{tooltipOuterHeight}px"

[thednp]

@Gruven I will try the first solution first, I think that makes alot more sense.

Update

I've already tested and I like the result, I think this fixes all possible inconsistencies reported here or other future ones, I will commit to master soon, hope all you guys do some tests and provide feedback.

Stay sharp.

[thednp]

@Gruven @duduik @Rudi-Batubara please do a final test, we need to push a new build into the cloud as soon as we can.

[Gruven]

@thednp already done 145defd#comments
Waiting @Rudi-Batubara

[thednp]

Alright guys we're good. This is now 100% closed.