How to add tooltip to navbar icons?

[LSYS]

Description

How do I add a tooltip to custom icons in the navbar?

I'm following the Quarto doc, adding a GitHub icon into the navbar:

---
website:
  navbar:
    right:
      - icon: github
        href: https://github.com/
        aria-label: GitHub
---

(From: https://quarto.org/docs/reference/projects/websites.html#nav-items)

But if I hover my mouse cursor, no tooltip appears.

The tooltip I want is something that looks like this: when I hover the mouse cursor over the Downloads icon:

[mcanouil]

I don't think there is an easy way.
You could use JavaScript to use aria-label as tooltip value.

Here is a quick and dirty script as an example:

include-after-body:
  - text: |
      <script type="text/javascript">
      var elements = document.querySelectorAll('[aria-label]');

      for (var i = 0; i < elements.length; i++) {
        var ariaLabel = elements[i].getAttribute('aria-label');
        elements[i].setAttribute('data-bs-title', ariaLabel);
        elements[i].setAttribute('data-bs-toggle', 'tooltip');
      }
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
      </script>

[davidleitch1]

Thanks. Quarto is a revelation to me. Got to it via reference from Holoviz Blog where I have been using Panel. Now have to think about how to integrate Holoviz Panel app with 9 templates into a Quarto website rather than redirect to a separate server. Too much chat..

[e-miz]

Thank you for the workaround!

I was using this when I noticed that when the menus are hidden (e.g. when viewing on a phone), the buttons are unusable. Clicking or tapping instead shows the tooltip. Right clicking/long press doesn't work to expose any kind of hyperlink.

Unfortunately I don't know much javascript so I can't provide a fix. Advice is appreciated, but I can also live without this.

[mcanouil]

@e-miz Could you share a small reproducible setup with this and the Quarto version you used?

[e-miz]

Sure. I can reproduce this in quarto 1.4.550 using the default website project generated by the VSCode Extension.

The only I changed was the _quarto.yml:

project:
  type: website

website:
  title: "quarto-navbar-icon-tooltip"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true
    include-after-body:
    - text: |
        <script type="text/javascript">
        var elements = document.querySelectorAll('[aria-label]');

        for (var i = 0; i < elements.length; i++) {
          var ariaLabel = elements[i].getAttribute('aria-label');
          elements[i].setAttribute('data-bs-title', ariaLabel);
          elements[i].setAttribute('data-bs-toggle', 'tooltip');
        }
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
        </script>

[mcanouil]

I see I can reproduce.
Note that the script was labelled by me as "quick & dirty".
Here you need to modify it to exclude the "burger icon" and/or make sure it is applied after the script working on this icon to expand.

Unfortunately, that's beyond the scope of Quarto (and I don't have much time to spend on this).

Edit: here a modified version that simply copy "aria-label" as "title" if it does not exist.
Note that it applies to absolutely everything that has a "aria-label" set.
For more, you'll have to learn JavaScript and implement what you want/need.

var elements = document.querySelectorAll('[aria-label]');
for (var i = 0; i < elements.length; i++) {
  var ariaLabel = elements[i].getAttribute('aria-label');
  if (!elements[i].hasAttribute('title')) {
    elements[i].setAttribute('title', ariaLabel);
  }
}