Bootstrap Tooltip not working (on Codepen w/ jQuery)


I’m learning to use Bootstrap and jQuery and currently doing the first of the Front End Libraries projects, the Random Quote Machine.

It’s finished, I just can’t get the Bootstrap tooltips working.

I followed their instructions on the docs as best I could, I’ve put popper.min.js before bootstrap.js in the codepen scripts and I copy and pasted their example to initialize tooltips everywhere (I have several set up in the HTML). I have adjusted the order of the imports and tried alternate versions, to no avail. I’m all out of ideas.

Heres the code:

The copy and pasted code from their docs is in the JS file at line 1 -3.
The HTML elements are on lines 6, 10, 19, 22.

Thanks for your help! :pray:

I’m also open to suggestions for a more “accessibility-friendly” background gif…

It looks like it is just the wrong version(s) of the scripts. Try using the links from the docs page.

I would suggest you remove the background gif, it’s super annoying.

1 Like