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>
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 ^^.
Advertisement
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"
});
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