How to dynamically change the background color of v-tooltip?

[LovelyAndy]

I've just found this library and it's been pretty sweet thus far!
The one issue I am having is with customizing the CSS of my tooltips. I went through this whole editor and it's pretty great to work with. That being said, if I want to make the background-color dynamic, based on a color picker element, how would I go about that?

If there were an option simply for background-color in the v-tooltip="{}" prop object, I could just interpolate the value that way. However, as it stands, I'm just grabbing the custom css from the style section as per the documentation.

Any tips on how I might achieve this?

main.ts

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
import FloatingVue from 'floating-vue'

createApp(App)
  .use(FloatingVue, {
    themes: {
      customTip: {
        $resetCss: true,
        triggers: ['hover'],
        autoHide: true,
        placement: 'top',
        distance: 5,
      },
    },
  })
  .use(router)
  .mount('#app')

App.vue

<template>
<button v-tooltip="{ content: 'Print ❏', theme: 'customTip' }">Hover Me</button>
</template>

<style lang="scss">
.wrapper {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}

.v-popper--theme-customTip .v-popper__inner {
  background: #f00000;
  color: #ffffff;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
}

.v-popper--theme-customTip .v-popper__arrow-outer {
  visibility: hidden;
}

.v-popper--theme-customTip .v-popper__arrow-inner {
  visibility: hidden;
}
</style>

[Akryum]

You can probably achieve this with a CSS custom property (aka variable)?