Bootstrap 5 and tootips

Bootstrap Studio Help
1

After updating to BS5, I have a tooltip that doesn’t automatically appear on mouseover. Instead, it require me to click it once, to make it appear. After that, it behaves as expected, appearing on mouseover.
Any way to fix it so that it works as under BS4, that is, it appears on every mouseover, including the first one?

2

Hmm, it seems to be happening on all my links, so it’s not just a tooltip issue

3

Tooltips are opt-in for performance reasons, so you must initialize them yourself.

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

add that to a JSfile

4

Thanks, kuligaposten. It seems to be a larger issue, though. None of my links are working either until I click somewhere on the page. Once I c lick, everything becomes active – hovers work and I can click on links.

5

I have yet to build a site in BS5, but Bootstrap tooltips were enabled and fully functional in BSS via the UI without having to add any additional code in Bootstrap 4.6.

Have they gone and changed this again in BS5?

6

I think something else is at play in my case, as none of my links work either until I click on the page first. I’ve left it for a couple of days, but may repost the issue in a new thread.

7

Could you send us your design or upload it so we can take a look? My guess is there is an overlay that receives the first click and is hidden afterwards, but I can only guess without seeing the code. Thanks in advance!

8

@printninja

If you activate the tooltips in BSS via the UI it will work as you expect. BSS make a bs_init.js file with the activation of the tooltips. BSS use the data attribute data-bss-tooltip="" for the selector.

I thought that the OP maybe had a custom code block from an example which normaly will have the data attribute data-bs-toggle=“tooltip” for the selector.

9

Thank you, Gabby and kuligaposten for your very kind help.

Gabby, the issue seems to be with an embedded Google Map, which is perhaps messing with an overlay, as you’ve mentioned. In the code below, the culprit appears to be the onClick, which worked fine in BS4, and which we used so that visitors would click once on the map to activate map zooming and scrolling. However in BS5, this code is giving us the opposite effect: map zooming and scrolling happen with no click, and all other hovers and links require a click somewhere on the page first!
Removing the onClick solves the problem, except that the Google Map zooms and scrolls straight away, without a first click. I hope that all makes sense.

The page can be viewed here: http://davidbasse.com/test-2021/find-your-station.html

<div class="map-overlay" onClick="style.pointerEvents='none"></div>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1daU3VM8IY1nb4a6hEOeyH4RHc_EtgXAn" width="100%" height="480"></iframe>`
10

It appears that .map-overlay is set to position absolute which takes it out of the document flow. I would change that to relative and do away with the top and margin-top setting.

You might also want to put it inside a div wrapper with the map so that the wrapper is set to relative if you want to still use the absolute method. Not having a relative setting for the absolute though will reference the body.

.map-overlay {
    background: transparent;
    position: relative;
    width: 100%;
    height: 100%;
    /* top: 480px; */
    /* margin-top: -480px; */
}
11

Actually after a little more research on why your problem occurred just by updating from Bootstrap 4 to 5 is that your relative setting is removed on columns in Bootstrap 5 since they removed it. Remove position: relative from grid columns #25255

So you lost the relative setting on your col that the .map-overlay is nested in.

Again, either add the map and overlay div inside a wrapper and set it to relative or add a class on the col and set it to relative.

(There is also the class position-relative that could be added to the col that is now available in Bootstrap 5)

12

Twinstream, that is absolutely fantastic! I added .position-relative to the column, and that solved the problem. Plus I learned about some new BS5 utility classes along the way :v: Thanks so much for your help!