I am using Primevue v3.51.0. I need to transition to CSP but I still have issues with Primevue’s Tooltip. It reports an inline style.

I have added the following configuration to my Vue app:

const nonce = document.querySelector('meta[name=csp-nonce]')?.content;
app.use(PrimeVue, {
      pt: { directives: { tooltip: { root: { nonce }, arrow: { nonce }, text: { nonce } } } },
      csp: { nonce },

Now, for all Primevue components the nonce works and I get no errors. When I hover on any element with the v-tooltip directive, though, I get the following warning:

[Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’ https: fonts.googleapis.com ‘nonce-9udBFzvvjdv7+maRQWYcRA=='”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-JYsO83ExUe+QAZ6wMV20BU+7xt/XdNX8xs4k1/QV4QA=’), or a nonce (‘nonce-…’) is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the ‘unsafe-hashes’ keyword is present.


Running the following script so I can get the info when I invoke a tooltip…

const int = () => {
    const ints = setInterval(() => {
        const t = document.querySelector('.p-tooltip');
        if (t) {
            console.log(t.nonce, [...t.children].map((c) => [c, c.nonce]).flat())
                        }}, 200)
    setTimeout(() => clearInterval(ints), 5000)


… I get the following result:

FwDachJLYNwPYmJSuvjHwQ== (4) [div.p-tooltip-arrow, 'FwDachJLYNwPYmJSuvjHwQ==', div.p-tooltip-text, 'FwDachJLYNwPYmJSuvjHwQ==']

So, the tooltip has its nonce set right but I still get the warning.
Am I doing somthing wrong? Any suggestions?

PS. The nonce values in the different exaamples is not the same because it changes on each page reload.