Skip to content

I am using bootstrap and everything is working except for tooltips

Okay so my javascript is definitely not on point, and I am really stuck with integrating tooltips into my rails application. I have done everything that bootstrap is telling me to do in any possible way, and it still doesnt work…

The only progress I made is that now when I hover over something I see the text that is supposed to be a tooltip in a form like this (you cant see the mouse tho): enter image description here

Apart from that when I insert the code that bootstrap says would activate the tooltips everywhere into the script of my layout application.html.erb like this

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
    <%= favicon_link_tag asset_path('favicon-nobg.png'), style:"border-radius: 50px" %>

  <body style="padding: 80px 0 200px 0">
    <% if notice %>
     <p class="alert alert-success"><%= notice %></p>
    <% end %>
    <% if alert %>
     <p class="alert alert-danger"><%= alert %></p>
    <% end %>
    <%= render 'shared/navbar' %>
    <%= yield %>
    <%= render 'shared/footer' %>
      <script src=""></script>
      var tooltipTriggerList = []'[data-bs-toggle="tooltip"]'))
      var tooltipList = (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)

I still get the error in chrome saying that “new:206 Uncaught ReferenceError: bootstrap is not defined at new:206 at () at new:205”

I have also tried just using popper with the tutorials they provide, but i am honestly completely stuck…

If you can help me in any way here, I would be extremely thankful! Thank you so much! Vincent


The course where I learnt rails always told me to import bootstrap in a seperate file called app/javascript/packs/application.js. For some reason, importing bootstrap only works applies on the website when i include it as ‘bootstrap’, ‘bootstrap.bundle.js’ or anything like that doesnt work. I switched to including bootstrap in the layout as a script like it is said in the bootstrap documentation. Now tooltips work somehow ^^.



Apparently you said popper.js is imported (proved by your working dropdown).

But I don’t see where you are importing bootstrap, and I suggest you to import the bootstrap-bundle.js (instead of bootstrap.js) because it bundles popper with bootstrap, then you won’t have to import it yourself, and it come with the correct version used by bootstrap. as referred here

If it is a code issue in your own JS, try this snippet to activate tooltips globaly :

    selector: "[data-toggle='tooltip']",
    trigger: "hover"

Of course, with this snippet, you must have attribute data-toggle='tooltip' with your title="The text I want to display within tooltip"

Do not forget to provide the version of bootstrap you are using, same for popper. Because I think that you are not using the correct version of popper.

  • Try npm install popper.js (near v1.14)
  • instead of npm install @popperjs/core
1 People found this is helpful