Is it possible to create tooltips manually for any random text, similar to the use of bold, italic etc?

[royfrancis]

I would like to add tooltips to certain bits of text to display additional information.

Tooltips in quarto seems to be automatically created for citations and footnotes. Is it possible to create tooltips manually for any random text, similar to the use of bold, italic etc?

[mcanouil]

Tooltip is a HTML feature.
Quarto is using Bootstrap (https://getbootstrap.com/docs/5.2/components/tooltips/).
You can find many examples on the Internet that you can adapt to your needs.

Note that, for something "similar" to bold/italics/etc. I suggest you create a shortcode Quarto extension, see https://quarto.org/docs/extensions/shortcodes.html.

Edit: you could also use the NutShell Quarto extension, see https://github.com/schochastics/quarto-nutshell.

[jmhimara]

Quarto is using Bootstrap (https://getbootstrap.com/docs/5.2/components/tooltips/).

Curious, is Bootstrap loaded by default in Quarto? Because I tried to use some bootstrap classes (specifically modals), but I also had to manually load the appropriate CSS and JS cdn links for it to work.

[cderv]

@jmhimara which format did you use ? Quarto HTML format uses Bootstrap 5 by default
https://quarto.org/docs/output-formats/html-themes.html#overview

Quarto 1.3 uses Bootstrap 5.1.3 more precisely. Next 1.4 will update this version. Are you component available in 5.1.3 ?

Otherwise, you'll need to wait for the update (probably soon available in pre-release version)

[jmhimara]

Yeah, HTML format with the cosmo theme. I tried to use the modal example from the bootstrap website, but it didn't work unless I linked the appropriate cdns. The modals should be available in that version of bootstrap.

An Example copied from the bootstrap website:

---
format: 
  html:
    includes: include-after-body
    theme: cosmo
---

# Modal

```{=html}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

```

```{=html}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Text inside modals
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

[cderv]

I don't know about the specific code you share, but I see you are loading Bootstrap 4.3.1 so bootstrap 4.

Quarto HTML uses Boostrap 5 and if I try this example for the doc https://getbootstrap.com/docs/5.1/components/modal/#live-demo
It works as expected without loading anything

Is the code you use Bootstrap 5 compatible ?

[jmhimara]

Hmm, ok. I had tried that before and it didn't work. That's why I used version 4. But I just tried it on a new file and it works and now version 5 is working.

Anyway, thanks.