Bootstrap tooltips/toast not working?

Poking around a little more I can see popper is being added - it just doesn't show up anywhere theme related aside from package.json and in the build folder. How it gets into the build folder is still vague.

In theory there could be a conflict with the older version loaded but I wasn't seeing any js errors thrown in console. web/core/yarn.lock is including 2.11.5, where radix + subtheme are including 2.11.8. I don't have the tour module enabled.

I'll look into this shortly and keep you posted, sorry been really busy lately

No problem, I've been bouncing between projects myself.

I could just be missing something obvious, but in that case at least it's a win for documentation. :)

Do you have time to take a look at this?

Even if you don't have time to solve it, you'd know better how to approach fixing it (with some direction I can make more attempts, but it feels like I'm just going in circles).

hey sorry it took me a while, been really busy, I can check in during the weekend I hope

As a first hint, I'd say that main.script.js used in the subtheme is querying for data-toggleattribute while Bootstrap 5 uses data-bs-toggle.

Thanks, PhilY I'll look into that. I did try replacing the initialization script with the generic example on the bootstrap site and another from SO iirc.

I can try just modifying the data attribute on the existing code. :)

Guys I updated the docs on how to run the Toasts:
https://doxigo.gitbook.io/radix/components/toasts

the Tooltips component is not done yet, will update you once that's done

Okay also added the README for the Tooltips here. Generally no twig needed but rather make sure to initiate the Tooltip to work, going along the README will do the trick.

Removed the redundant init in the main.script.js and moved example usage into the components itself JS files.

Marking this as done, feel free to re-open if the READMEs are unclear.

Sorry for not getting to this until now, I'd been pulled onto other things plus family is visiting.

The README makes sense for bootstrap, but it’s unclear for Radix.

Under Considerations:

Tooltips are opt-in for performance reasons, so you must initialize them yourself.

Going further down the page:

and then trigger it with the following javascript init:

However in components/tooltips/tooltips.js there's a comment to comment it out if you don't want it - this makes it seem like it is opt-out, not opt-in.

Tooltips only worked for me after manually adding the contents of components/tooltips/tooltips.js into my theme, which is more in line with the docu than the comments in the JS files. I suppose because they aren't referenced in any templates the CSS/JS files aren't getting added to Drupal as a library like SDC normally does.

Loading the component manually via a template would be a cleaner approach as it would only trigger on the pages where it is actually needed.

It's also missing it's tooltips.twig file which is also required for components. There's not anything to put into that twig file, but the line "you don't necessarily need a specific twig template" is a bit misleading - you can't actually insert it into a twig template. Doing so in a

Another interesting thing, if I load a tooltips.js via a library into a specific view where I want it the tooltips work fine, but the js for the navbar dropdown doesn't work. No errors show up in the browser console. The version of the file that goes through the build is 8265 lines long and includes all of the bootstrap js, not just tooltip which I assume is causing some conflict. I tried playing around with _bootstrap.js and a few other things to no avail.

Keeping the init + tooltip import in my main.script.js has both the dropdown and the tooltips working on that page, but isn't ideal from a performance standpoint.

contents of tooltips.js in src

import { Tooltip } from "./_bootstrap";

// * Initiating Bootstrap Tooltip.
(() => {
	const tooltipTriggerList = document.querySelectorAll(
		'[data-bs-toggle="tooltip"]',
	);
	const tooltipList = [...tooltipTriggerList].map(
		(tooltipTriggerEl) => new Tooltip(tooltipTriggerEl),
	);
})();

is the import { Tooltip } from "./_bootstrap"; path correct? considering probably your component is within your components directory? you should import Tooltip from the node modules

marking this done, feel free to reopen

Automatically closed - issue fixed for 2 weeks with no activity.