Can't find bootstrap or popper in the HTML

[choldgraf]

Maybe I am just being silly, but in the latest version of the theme I can't figure out where popperjs or bootstrapjs is actually loaded. They are there in the pandas docs, but they aren't in the pydata-sphinx-theme. Is there something clever going on that loads these in another fashion?

I realized this because I was trying to add a tooltip to one of my pages, but the function is not defined in the current pydata-sphinx-theme, while it is defined in the pandas docs.

[jorisvandenbossche]

As far as I understand it, they are loaded in the main index.js:

https://github.com/pandas-dev/pydata-sphinx-theme/blob/60964c57a3a52d0aff15fce105306d0f21e34a59/src/js/index.js#L1-L3

[hoetmaaiers]

Correct. This is the webpack way of telling what to include in the final bundle. This could also be done for other type of assets, e.g. css.

[choldgraf]

Thanks for that explanation - makes sense to me. However, it doesn't explain why we have some bootstrap functions in an earlier version of the theme, but we do not have them in a new version of the theme.

Try running $("div").tooltip in:

• The current pydata theme docs: https://pydata-sphinx-theme.readthedocs.io/en/latest/
• The pandas docs: https://pandas.pydata.org/docs/

Tooltips should be a bootstrap feature that relies on popper, but I believe both are in our webpack bundle, right?

[jorisvandenbossche]

I indeed see the same difference. Running that in the browser console gives undefined for the latest pydata theme docs.

(you are running into this while writing an extension that uses javascript?)

[choldgraf]

well specifically I use tooltips in the sphinx-book-theme, and they don't work anymore :-)

[jorisvandenbossche]

With https://pydata-sphinx-theme.readthedocs.io/en/v0.2.1/ it still works (I enabled some older versions on readthedocs for easier comparison), so it's probably due to #167

@choldgraf would it be possible to include something small here in the demo docs that uses a tooltip? Or does it need a custom layout?

[choldgraf]

nah it'd be easy - I think it's literally just calling $("some-selector").tooltip() on an element and it will add a tooltip to it (they are pretty nifty!)

[hoetmaaiers]

I am able to fix this (PR coming up), but I now the following error:

jquery.js:2 Uncaught TypeError: $.getQueryParameters is not a function in doctools..js

After Googling, this issue seems related: sphinx-doc/sphinx#1676.

[choldgraf]

ah so the issue there is double-loading of jQuery?

[jorisvandenbossche]

And then they say Python packaging is a mess .. ;)

[hoetmaaiers]

Haha, I'm afraid this is due to a Python package ;).

JQuery is loaded via Sphinx, the same way doctools.js and other Sphinx related scripts are loaded. Somehow this conflicts with the popper.js initialisation not being able to hook into this jQuery instance.

It is harder then I thought to solve. Will look into this further...
The javascript loaded by Sphinx, can we influence this in any way?

[jorisvandenbossche]

But it's still the javascript inside the python package that is the problem, not the python code! 😃

The javascript loaded by Sphinx, can we influence this in any way?

I am wondering, does the order matter here? We could ensure our js (which included popper) is loaded first, before the sphinx js? (now it is the other way around)

[hoetmaaiers]

I am unsure if the order is the solution.
A solution would be to load jQuery via Webpack (this does solve the popper thing). By doing this doctools.js breaks, so loading doctools also via Webpack would be necessary.

I look into this somewhat further to figure out maybe loading a different kind of module might solve this instance problem.

[jorisvandenbossche]

This should be closed by #179