Цвет текста для всплывающей подсказки

У меня есть много компонентов v-tooltips, и я хотел бы знать, как изменить цвет текста, а не цвет всплывающей подсказки. Я попытался проверить элемент, но невозможно проверить всплывающую подсказку, поскольку она появляется только при наведении на элемент.

Вот мой код:

    <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>

Я также просмотрел документацию vuetify, но не нашел атрибута для цвета текста во всплывающей подсказке v, только в цвете фона.

css vue.js vuejs2 vuetify.js v-tooltip

24.11.2022 16:24

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

262

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать css в классе .v-tooltip__content:

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/[email protected]/css/materialdesignicons.min.css" rel = "stylesheet">
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

24.11.2022 16:39

Другие вопросы по теме

Взаимоисключающие реквизиты Vue3

Как передать событие от дочернего компонента к родительскому?

Поддержание работы Vue Router с помощью ссылок маршрутизатора Vue в Vue3

Как я могу переопределить стили в табуляторе?

Как перенаправить на страницу с ошибкой, если путь имеет .(точку) в Nuxt 2?

Вызов функции с настраиваемой таблицей данных в Vuejs

Импорт бутстрапа в vuejs

VueUse: как использовать переменную isSupported несколько раз?

Отклонение необработанного обещания: RangeError: неверная дата в сафари Vuejs

Как изменить интервал TimePicker в пользовательском интерфейсе элемента

Цвет текста для всплывающей подсказки

Ответы 1

Другие вопросы по теме

Похожие вопросы