I’m having an issue getting the bootstrap tooltip to work. It’s functioning fine on another site I built here on the left side of the page.
I’ve followed the same script link structure for Webflow but I keep getting
Uncaught TypeError: $(...).tooltip is not a function
My read only link to my webflow project is below if anyone has any input?
Thanks!
Here is my site Read-Only: SteveDillon.design - Webflow Project
@sam-g - great catch! However, after I updated to a secure version of jquery-ui, the error is still there…?
same error tried with different logic like jquery CDN version, placing Jquery before bootstrap link, etc but doesn’t work.
If you check your source you will see that Webflow loads jQuery already. No need for it twice.
thanks, I didn’t realize it was already loaded
Thanks, I have removed the jQuery links but still showing an error.
Since BS requires JQ and it is loaded in the before body close area that is where you need to load your script.
Yes, In that case getting tool tip error.
Right, so you need to move the links for jQuery UI and Bootstrap to the “Footer Code” section of Webflow’s custom code so they both get loaded AFTER Webflow automatically loads jQuery in the header section. See screenshot:
I tried moving the links for jQuery UI and Bootstrap to the “Footer Code” section of Webflow’s custom code so they both get loaded after Webflow automatically loads jQuery, but couldn’t get the tooltips to actually show up. Very strange.
I ended up just using this plugin instead and it works. Screenshot attached of how I added the code.
Here’s the code I used and where I placed it to try to get the BS Tooltip to work:
<!-- Script Links in Footer Code -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<!-- BS Toolip Code on Page -->
<ul class="pagination vert-links">
<li class="page-item"><a class="page-link" href="#cs-title" data-toggle="tooltip" data-placement="top" title="Title Section"><i class="far fa-circle"></i></a></li>
<li class="page-item"><a class="page-link" href="#project-overview" data-toggle="tooltip" data-placement="top" title="Project Overview"><i class="far fa-circle"></i></a></li>
<li class="page-item"><a class="page-link" href="#user-research" data-toggle="tooltip" data-placement="top" title="User Research"><i class="far fa-circle"></i></a></li>
<li class="page-item"><a class="page-link" href="#" data-toggle="tooltip" data-placement="top" title="Definition & Ideation"><i class="far fa-circle"></i></a></li>
<li class="page-item"><a class="page-link" href="#" data-toggle="tooltip" data-placement="top" title="Paper-Prototype"><i class="far fa-circle"></i></a></li>
<li class="page-item"><a class="page-link" href="#" data-toggle="tooltip" data-placement="top" title="iOS Prototype & Testing"><i class="far fa-circle"></i></a></li>
</ul>Thanks for putting the pen together, but I don’t see any difference between how this is setup and my webflow project other than the placement of the tooltip - yours is on top, while mine is to the right which would have no effect.
Here’s the link to the page I’m using the code on. Other than the placement / order of the script links, I don’t see why it’s not working.
@webdev NEVERMIND! I had some custom CSS that was making the tooltip transparent, but it’s there.
Thanks for your help!
this works, thank you sir!
You made my day. 
No problem! Glad it worked!