Bootstrap tooltips not working? #6205

dense-set · 2023-07-13T20:53:39Z

dense-set
Jul 13, 2023

Description

Quarto has Bootstrap built-in. Thus I supposed that the Bootstrap tooltips would work. However, the following code (as suggested in the previous link) doesn't work as expected:

index.qmd:

---
title: "quarto expt lab"
---

This is a Quarto website.

To learn more about Quarto websites visit <https://quarto.org/docs/websites>.

```{=html}
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>
```

Here is what I get:

Nothing happens if I hover or click on "Hover".

Answered by mcanouil

Jul 13, 2023

In addition, if you use third party documentation instead of the official Bootstrap, there is definitely no warranty it is going to work.

See https://getbootstrap.com/docs/5.3/components/tooltips/.

When you do follow the proper documentation and put the script in the right place:

Screen.Recording.2023-07-14.at.01.41.50.mov

---
title: "Quarto Playground"
format: html
include-after-body:
  - text: |
      <script>
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
      </script>
---

This is a playground for Quarto.

```{=html}
…

View full answer

cscheid · 2023-07-13T23:05:14Z

cscheid
Jul 13, 2023
Maintainer

When you use Raw HTML blocks {=html}..., you are kind of "voiding the warranty"; there's nothing special in quarto about the result. We just inject the HTML directly. That means that you're also the one responsible for making it work. We can't offer help on code we didn't write ourselves, and in this case, your best bet is to actually learn how to debug HTML/JavaScript issues through the developer tools available in your browser.

6 replies

mcanouil Jul 13, 2023
Collaborator

In addition, if you use third party documentation instead of the official Bootstrap, there is definitely no warranty it is going to work.

See https://getbootstrap.com/docs/5.3/components/tooltips/.

When you do follow the proper documentation and put the script in the right place:

Screen.Recording.2023-07-14.at.01.41.50.mov

---
title: "Quarto Playground"
format: html
include-after-body:
  - text: |
      <script>
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
      </script>
---

This is a playground for Quarto.

```{=html}
<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>
```

Where javascript script should be place in an html document?

Copilot Anser (many other places with the exact same information):

GitHub Copilot: In an HTML document, JavaScript code can be placed in several locations, depending on the desired behavior and functionality. Here are some common locations where JavaScript code can be placed:

Inside the <head> section: You can place JavaScript code inside the <head> section of an HTML document using the <script> tag. This is useful for code that needs to be executed before the page is fully loaded, such as code that defines global variables or functions.

Inside the <body> section: You can place JavaScript code inside the <body> section of an HTML document using the <script> tag. This is useful for code that needs to be executed after the page is fully loaded, such as code that manipulates the DOM or interacts with user input.

In an external file: You can place JavaScript code in an external file with a .js extension and then link to it from the HTML document using the <script> tag. This is useful for code that is reused across multiple pages or for code that is too large to be included directly in the HTML document.

In general, it is a good practice to place JavaScript code at the end of the <body> section, just before the closing </body> tag. This ensures that the HTML content is loaded before the JavaScript code is executed, which can improve page load times and prevent errors.

Answer selected by dense-set

dense-set Jul 14, 2023
Author

Thanks for helping me out! I didn't know of include-after-body which is so relevant here.

One question:
When I render the qmd files, the generated _site/site_libs/bootstrap/bootstrap.min.js shows that it is based on v5.1.3. Is there some way I can use the latest Bootstrap?

mcanouil Jul 14, 2023
Collaborator

Yes, and this is described in Bootstrap documentation (as it is for nearly all CSS/JS libraries documentation).
You might want to go through Quarto documentation (https://quarto.org/docs/output-formats/html-basics.html).

dense-set Jul 14, 2023
Author

So, I can do something like this?:

include-in-header:
  text: |
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

include-after-body: 
  text: |
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

But, we still have the following lines in the rendered index.html's <head>:

<script src="site_libs/bootstrap/bootstrap.min.js"></script>

and

<link href="site_libs/bootstrap/bootstrap.min.css" rel="stylesheet" class="quarto-color-scheme" id="quarto-bootstrap" data-mode="light">

Is it a good idea to load two different versions of BS in the same HTML file? Should I worry for any conflicts?

mcanouil Jul 14, 2023
Collaborator

No it is not a good idea but it's what you want to do for some reason.
Now it's 100 % HTML related issue and here is not the good place for that as explained previously.
I suggest you familiarise yourself with HTML/CSS/JavaScript good practices and do whatever you want/think is best for your use case.

Bootstrap tooltips not working? #6205

Uh oh!

Uh oh!

dense-set Jul 13, 2023

Description

Replies: 1 comment · 6 replies

Uh oh!

cscheid Jul 13, 2023 Maintainer

Uh oh!

Uh oh!

mcanouil Jul 13, 2023 Collaborator

Uh oh!

Uh oh!

dense-set Jul 14, 2023 Author

Uh oh!

Uh oh!

mcanouil Jul 14, 2023 Collaborator

Uh oh!

Uh oh!

dense-set Jul 14, 2023 Author

Uh oh!

Uh oh!

mcanouil Jul 14, 2023 Collaborator

dense-set
Jul 13, 2023

Replies: 1 comment 6 replies

cscheid
Jul 13, 2023
Maintainer

mcanouil Jul 13, 2023
Collaborator

dense-set Jul 14, 2023
Author

mcanouil Jul 14, 2023
Collaborator

dense-set Jul 14, 2023
Author

mcanouil Jul 14, 2023
Collaborator