Bootstrap tooltip issues

[Sup3rlativ3]

Hi,

I wanted to enable tooltips on my site so in the params I enabled bootstrapJavascript

bootstrapJavascript = true

I added the tooltip information to a span just to test.

Testing

Tooltips still weren't working so I assumed it was just the base version of the bootstrap js which doesn't include popper which is needed for the tooltips to work.

So in my custom-head.html file I added the bootstrap bundle js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

This worked to enable the popups. I tested locally and things seemed to be working as expected.

I then pushed these changes to my Azure Static Site and noticed that the popups had no styling at all and everything but the text was transparent. I've tested this on both Chrome and Firefox and the same issue is present.

I added some custom css to test if I could target the tooltip and I've shown that works both locally and on Azure. Interestingly I have to add !important or the change won't show.

.tooltip-inner{
  background-color:#000 !important;
}

Does anyone have any idea why the tooltips would be losing all styling?

[Sup3rlativ3]

So the tooltip (/node_modules/bootstrap/scss/_tooltip.scss) sets transparency to 0 for tooltip and that seems to be causing the issue.

I confirmed this by setting the below on the page with tooltips

.tooltip {
  --bs-tooltip-zindex: 1080;
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-margin: ;
  --bs-tooltip-font-size: 0.875rem;
  --bs-tooltip-color: var(--bs-body-bg);
  --bs-tooltip-bg: var(--bs-emphasis-color);
  --bs-tooltip-border-radius: var(--bs-border-radius);
  --bs-tooltip-opacity: 0.9;
  --bs-tooltip-arrow-width: 0.8rem;
  --bs-tooltip-arrow-height: 0.4rem;
  z-index: var(--bs-tooltip-zindex);
  display: block;
  margin: var(--bs-tooltip-margin);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-tooltip-font-size);
  word-wrap: break-word;
  opacity: 1;
  background-color: var(--sl-color-bg-inline-code);
  border-radius: 10px;
  padding: 10px;
}

[h-enk]

If you'd like to use Bootstrap's tooltips, you'd only have to do two things:

In config/_default/params.toml set (like you already did):

# Doks (@hyas/doks-core)
[doks]
  # Bootstrap
  bootstrapJavascript = true # false (default) or true

Add to assets/js/custom.js (see also Enable tooltips):

// Put your custom JS code here
import { Tooltip } from 'bootstrap';

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
// eslint-disable-next-line no-unused-vars
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new Tooltip(tooltipTriggerEl))

And, you're good: