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

CSS - Implementing Below Element Validation Message in MVC 3

Hello everyone, Currently, I am looking for a way to show input validation messages below the element instead of beside it. The default CSS file adds a margin-bottom of 19px to the <input /> element, so I need to adjust this positioning in order to ...

Set up Vue to have both a development and a production build

Recently, I took over a Vue project that exclusively creates production builds and applies uglification to everything. Unlike my previous projects, this one doesn't utilize a webpack.config.js file; instead, it relies on a vue.config.js configuration ...

Why do my cards keep shrinking instead of moving to a new column when using flexbox and flex-flow?

I'm facing an issue with my flexbox that is causing my items to constantly shrink instead of moving to a new row. I've tried various solutions but nothing seems to work. I have removed the CSS for elements like headers that I believe are unrelate ...

Is there a way to shift this structure to the right without relying on the float property?

Here's the HTML and CSS I have - .font-size-add-class { background-color: #2f2f2f; color: #f9f7f1; } .font-sizes { text-align: right; display: table; margin-top: 15px; cursor: pointer; } .font-sizes > .small { font-size: 12px; } .font ...

What are some solutions for resolving a background image that fails to load?

HTML: `<div class="food-imagesM imagecontainer"> <!--Page info decoration etc.--> </div>` CSS: `.food-imagesM.imagecontainer{ background-image: url("/Images/Caribbean-food-Menu.jpg"); background-repeat: no-repeat; backgroun ...

White background with a black border and transparency on an Android device

I'm trying to create a shape that has a white background with a black border. <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shap ...

Vue app setup interrupted by miscellaneous ECONNRESET warning

While setting up my vue app using vue-cli, everything went smoothly until I ran the command npm install to install dependencies. I encountered an error with https, so I switched it to http which resulted in the following log: npm WARN registry Unexpecte ...

Progressive computation depending on the size of the window in Cascading Style Sheets

Is there a way to dynamically calculate the left percentage in CSS based on the window width? For example: if width > 700px: left: 30% if width > 800px: left: 32% Any suggestions on how to achieve this effect? ...

Setting row heights based on text in a chosen column within Excel

Hey there, I'm currently using Java code to generate a report in Excel. I've managed to set the height of rows and width of columns, but I've run into an issue where some data in a column is too large and affecting the height of other column ...

What is the best way to arrange map items using justify-content-around for optimal display?

I'm currently iterating through products using the map function, but I'm having trouble getting the justify-content-around property to apply. I am working on a React project with Bootstrap 4 integrated. Below is the code snippet: {props.product ...

"Utilizing D3's linkHorizontal() function to dynamically update based on the

My goal is to implement a drag and drop feature with a connection line in my project. The connection line consists of a starting point ([x, y]) obtained when the mouse is clicked, and a target point ([x, y]) that tracks the mouse position as the element is ...

Adjusting the image height to match the container height while preserving its original aspect ratio

Is there a method, using CSS alone, to adjust an image's height to fit its container while preserving aspect ratio and allowing the overflow of width to be concealed? It may seem like a complex set of requirements, but is it achievable? Essentially, I ...

Be cautious of potential warnings and errors that may arise while utilizing casl and vue together

I've been attempting to integrate @casl/ability and @casl/vue into my VueJS application, but I'm facing difficulties making it work. I'm unsure if I'm making a mistake in the implementation or if there is a compatibility issue with the ...

Learn how to retrieve data prior to rendering with Vue 3 and the composition api

Is there a way to fetch data from an API and populate my store (such as user info) before the entire page and components load? I have been struggling to find a solution. I recently came across the beforeRouteEnter method that can be used with the options ...

Modify the background color of checkboxes without including any text labels

I am looking to customize my checkbox. The common method I usually see for customization is as follows: input[type=checkbox] { display: none; } .my_label { display: inline-block; cursor: pointer; font-size: 13px; margin-right: 15px; ...

I am attempting to initiate a password reset process within vue.js

How can I fetch information using this link in vue.js http://localhost:2020/rest-password${token}&id=${data._id} Below is my code snippet: const submit = async () => { console.log('e'); try { const user = await axios.post( ...

Thickness of Border in Bootstrap Cards

I've been attempting to include a thicker border around the entirety of my Bootstrap 4 card. Despite specifying a thicker border, nothing seems to change. Below is a snippet of the code I'm working with: <div class="container"> <di ...

What is the best way to show distinct items and their frequencies from an array of objects in Vue.js/JavaScript?

I have been developing an inventory management application using Vuejs, and I am facing a JavaScript-related challenge in my project. The issue revolves around handling data that includes user information retrieved from a form, as well as static categories ...

Implementing universal styles to injected HTML (v-html)

I am facing an issue while injecting HTML content from my database using Vue. The problem is that although I can successfully inject the HTML, the framework stylesheet (Vuetify) does not seem to be applied to the injected content. The rest of the page ha ...

I'm interested in clicking on an image within a div to trigger a page refresh and then automatically hide the div once the page has refreshed

UPDATE 2 SITUATION To prevent access to quiz content until the page is refreshed, I am employing a semi-transparent image with a top-margin off-set. The following code functions flawlessly on one specific page and only once: JavaScript window.addEventL ...