How to change tooltip background of Vuetify 3?

I'm using the latest version of vuetify with Nuxt 3. I have a vuetify.js plugin:

`// plugins/vuetify.js
import { createVuetify} from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

const myCustomLightTheme = {
  dark: false,
  colors: {
    background: '#03DAC6',
    surface: '#FFFFFF',
    primary: '#6200EE',
    'primary-darken-1': '#3700B3',
    secondary: '#03DAC6',
    'secondary-darken-1': '#018786',
    error: '#B00020',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FB8C00'
  },
};
myCustomLightTheme.tooltip = {
  color: 'black',
  background: 'yellow',
};

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    // theme: {
    //   defaultTheme: 'myCustomLightTheme',
    //   themes: {
    //     myCustomLightTheme,
    //   },
    // },
    theme: {
    defaultTheme: 'dark',
      themes: {
        myCustomLightTheme
      }
    },
    ssr: true,
    components,
    directives,
  });

  nuxtApp.vueApp.use(vuetify);
});`

As it seems, myCustomLightTheme gets loaded but still I cannot change the background color of the tooltip. How to proceed ?

I've already pasted the relevant code. I was expecting to be able to change the background color of the tooltip.

Solution

Tooltip uses the CSS variables --v-theme-surface-variant for background color and --v-theme-on-surface-variant for text color. Just add those to your color declarations:

const myCustomLightTheme = {
  dark: false,
  colors: {
    'surface-variant': '#ffff00',
    'on-surface-variant': '#ffffff',
    ....
  },
};

Note that the background color is set with opacity of 0.7. This cannot be changed programmatically. If you want a different opacity, you have to override the CSS:

.v-tooltip.v-overlay > .v-overlay__content {
    background: rgba(var(--v-theme-surface-variant),1);
  }