Text-color for v-tooltip

November 24, 2022

I have many v-tooltips components and I’d like to know a way to change the text-color of it, not the color of the tooltip.
I tried inspecting the element but it’s impossible to inspect the tooltip since it only appears on hover of the element.

Here’s my code:

    <div v-if="this.nbFiltersActive !=0">
      <v-btn 
        v-if="this.toggleSettingsBtn == true"
        fab
        class="active-filters-alert"
        color="red"
        tile
        dark
        @click.stop="drawerSettings = true"
      >
        <v-tooltip 
          nudge-bottom="610"
          nudge-left="88"
          open-delay="500"
          color=#696969
        >
          <template #activator="{ on }">
            <span v-on="on" :color="textLightGrey">{{nbFiltersActive}}</span>
          </template>
          <span>You have filters applied</span>
        </v-tooltip>
      </v-btn>
    </div>

I also looked into the vuetify documentation but I didn’t find any attribute for the text color on v-tooltip, only on the background-color.

>Solution :

You can try with css on .v-tooltip__content class:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
    toggleSettingsBtn: true,
    nbFiltersActive: 421,
    textLightGrey: ''
    }
  }
})

.v-tooltip__content {
  color: blue !important;
}

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-main>
      <v-container>
      <div v-if="nbFiltersActive !=0">
  <v-btn 
    v-if="toggleSettingsBtn == true"
    fab
    class="active-filters-alert"
    color="red"
    tile
    dark
    @click.stop="drawerSettings = true"
  >
    <v-tooltip 
      nudge-bottom="610"
      nudge-left="88"
      open-delay="500"
      color=#696969
    >
      <template #activator="{ on }">
        <span v-on="on" :color="textLightGrey">{{nbFiltersActive}}</span>
      </template>
      <span>You have filters applied</span>
    </v-tooltip>
  </v-btn>
</div>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>