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):

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

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Joind</title>
    <%= 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" %>
  </head>

  <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' %>
  </body>
      <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script>
      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
      })
    </script>
</html>

JavaScript
​x
 
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Joind</title>
    <%= 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" %>
  </head>
​
  <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' %>
  </body>
      <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script>
      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
      })
    </script>
</html>
​
​

I still get the error in chrome saying that “new:206 Uncaught ReferenceError: bootstrap is not defined at new:206 at Array.map () 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

EDIT:

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 ^^.

Answer

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. https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js as referred here

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

$(document.body).tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "hover"
});

JavaScript
 
$(document.body).tooltip({
    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

Advertisement

Answer