Text-color in the v-tooltip

Is there a way to change the text color of v-tooltips components without affecting the tooltip background color? I attempted to inspect the element, but the tooltip only appears on hover, making it impossible to inspect.

Below is the code snippet:

    <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 have also checked the vuetify documentation, but could not find any attribute for changing the text color specifically for v-tooltip, only for the background-color.

Answer №1

You might want to experiment with CSS by targeting the .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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afc9c0c1dbef9981d7">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="394f4c5c4d505f40790b1741">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="176162725725396f">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e080b1b0a1718073e4c5006">[email protected]</a>/dist/vuetify.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to integrating ffmpeg with NuxtJS

I am completely new to Nuxt and currently in the process of migrating a Vue application that generates gifs using ffmpeg.wasm over to Nuxt.js. However, every time I try to access the page, the server crashes with the following error message: [fferr] reques ...

Axios saves the same data for each loop iteration

I am facing an issue where I need to store an array of objects in a database when a single button is clicked. I have tried using a foreach loop and inside the loop, I used AXIOS POST to save the information. However, AXIOS only stores the same object repea ...

Having trouble setting a value in a Vue.js variable

Upon assigning a value retrieved from the firebase collection, I encountered the following error message. Error getting document: TypeError: Cannot set property 'email' of undefined at eval (Profile.vue?5a88:68) Here is the code snippet in que ...

Positioning of Ajax modal popups on smaller screens

In my Asp.net/C# web application, I have a modal popup that contains multiple placeholders. However, I am facing an issue when trying to access the modal popup on smaller screens like iPads or iPhones. The page only displays half of the modal popup, maki ...

The SVG animation is reversing and decreasing in size from the bottom

Feeling lost, I spent a day searching without success. I have a project in full Vuejs and I thought using Svg would be easy and fun, but I can't figure out why the image resizes when playing an animation. The bottom of the svg seems to resize and get ...

Expanding using CSS3 to ensure it doesn't take up previous space

Currently, I am working on an animation for my web application. More specifically, I am looking to scale certain elements using CSS3 with the scaleY(0.5) property. These elements are arranged in a vertical list, and I want to ensure that they do not take u ...

Fetching promise from API and storing it in global variable

Apologies if this is basic, but I'm new to Vue and not very strong in JavaScript..... I am attempting to fetch data from an API and then store that data in a global object so that it can be passed down to child components. I am facing issues with se ...

Avoid activating the panel by pressing the button on the expansion header

I'm facing a problem with the delete button on my expansion panel. Instead of just triggering a dialogue, clicking on the delete button also expands the panel. How can I prevent this from happening? https://i.stack.imgur.com/cc4G0.gif <v-expansion ...

Crop and resize a portion of an image using CSS

Is there a way to display just part of an image on a webpage and scale that specific area either larger or smaller using CSS? A common method is by using the following code: $("#myDiv").css({ width: 100, height: 100, background: "url('myurl.jpg ...

Is it possible to resume CSS animation when the page is first loaded?

I'm looking for a way to ensure that my CSS animations on the elements in my header.php file continue smoothly when navigating to different pages. For example, if I have a 200-second looped animation and navigate to the "about us" page 80 seconds int ...

Received a 'Vue error: Redundant navigation to current location prevented' when attempting to refresh the page with updated parameters

I'm attempting to refresh the page with new parameters when the state changes: @Watch('workspace') onWorkspaceChanged(o: Workspace, n: Workspace){ if(o.type === n.type && o.id === n.id) return; this.$router.push({name: this.$rout ...

Do you know of a more streamlined approach to formatting this SCSS code?

Currently working on a Saleor Site and diving into the world of Django and SASS for the first time. While crafting my own styling rules in SCSS files, I've noticed some repetitive code that could potentially be streamlined. It seems like there should ...

Jquery animation in Wordpress without any need for scrolling

My Wordpress site features some animations that work flawlessly when the site is scrolled. The code looks like this: jQuery(document).ready(function($){ $(window).scroll( function(){ if(!isMobile) { $('.animate_1').each ...

Body of the table spanning the entire width of the screen

Looking for a solution to create a responsive table layout where the thead stretches up to a specified div, while the tbody expands to fill the entire screen width. Is this achievable without using fixed values? https://i.stack.imgur.com/v2ZYx.png It is ...

Issue with CSS color gradient transparency

I've successfully implemented a gradient that transitions from transparent to white by using the following CSS code: linear-gradient(to right, transparent, white) If you want to see it in action, click on this link: http://jsfiddle.net/fs8gpha2/ Al ...

What is the best way to address a row of hyperlink text located at the top of a webpage?

I have encountered an issue where three rows of text links near the top of a page shift up to the very top when a link is pressed, causing them to obscure a line of text that was already at the top. How can I keep the position of these three rows anchored? ...

Deactivate hover effects and media queries for Material UI controls in all states

Since I am using a touch-capable monitor, I noticed that hover styles are not showing up on any controls. Specifically, when I hover over a Material UI button, I see the following styles: https://i.stack.imgur.com/uwBpt.png Is there a way to disable all ...

The hamburger icon seems to be frozen and unresponsive

I'm struggling to get my hamburger icon to reveal the navigation bar when clicked. The icon itself functions properly and adapts to different screen sizes, but the overlay remains stationary. Check out my code on JSFiddle! <html> <head> ...

Adjust the state based on the event in ReactJs

I have the following code snippet in a React JS application: const items = [ { value: "A", label: "A" }, { value: "B", label: "B" }, { value: "C", label: "C" }, { value: "D", label: "D" }, { value: " ...

Using the Vue.js Compositions API to handle multiple API requests with a promise when the component is mounted

I have a task that requires me to make requests to 4 different places in the onmounted function using the composition api. I want to send these requests simultaneously with promises for better performance. Can anyone guide me on how to achieve this effic ...