Vuetify V-Tooltip Unable to Change CSS

Vuetify v-tooltip unable to change css

Content is under .v-tooltip__content. Also it is set on the element itself, so important is required as you already did to override the styling.

.v-tooltip__content {
  font-size: 50px !important;
  opacity: 1 !important;
  display: block !important;
}

Using Vuetify tooltip (v-tooltip) component with an external activator (i.e. not wrapped)

Try this:

<v-tooltip bottom
  v-model="filterBtnTTip"
>
  Filter displayed items
</v-tooltip>

<v-btn
  icon
  @click="isFilter = !isFilter"
  @mouseover="filterBtnTTip = true"
  @mouseleave="filterBtnTTip = false"
>
  <v-icon>fa-filter</v-icon>
</v-btn>

...
data () {
  return {
    ...
    filterBtnTTip: false
  }
}

Vuetify tooltip prevent v-if component to reappear

You should put the v-if directive on the v-tooltip element instead of the button, or use v-show on the button instead of v-if.

The reason that the button doesn't appear is that the button is in a slot of the tooltip. Using v-if, the button is not rendered, so the slot is blank, forcing the tooltip component to use the default slot contents. You can't re-fill an empty slot, at least in Vuetify. v-show works because the button is still rendered to the DOM, it is only hidden.

USING V-IF ON THE TOOLTIP:

new Vue({  el: '#app',  vuetify: new Vuetify(),  data() {    return {      val: 5    }  }})

<!DOCTYPE html><html>
<head>  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">  <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></head>
<body>  <div id="app">    <v-app id="inspire">      <v-container fluid class="text-center">        <v-row          class="flex"          justify="space-between"        >          <v-col cols="12">            <v-btn @click="val++">+</v-btn>            <v-btn @click="val--">-</v-btn>          </v-col>          <v-col cols="12">            {{ val }}          </v-col>          <v-col cols="12" class="mt-2">            <v-tooltip bottom v-if="val > 2">              <template v-slot:activator="{ on }">                <v-btn color="green" v-on="on">                  > 2                </v-btn>              </template>              <span>tooltip</span>            </v-tooltip>          </v-col>          <v-col cols="12" class="mt-12">            <v-btn color="blue" v-if="val > 2">              > 2            </v-btn>          </v-col>        </v-row>      </v-container>    </v-app>  </div></body>
</html>

How to add a newline in Vuetify v-tooltip

Insert p tags instead of spans, this will separate on to two lines.

Added mb-0 to remove excess spacing.

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              color="primary"
              dark
              v-bind="attrs"
              v-on="on"
            >
              Button
            </v-btn>
          </template>
          <p>Tooltip</p>
          <p class="mb-0">Tooltip2</p>
        </v-tooltip>
      </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>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>

Vuetify tooltip shows in top left corner when a link from a v-button is followed

Seems like you have the same issue as this: https://github.com/vuetifyjs/vuetify/issues/2480 but with different versions of Vuetify.

There are many issues and requests for an attribute of tooltip for buttons, but for now the solution can be like in this fix: https://github.com/vuetifyjs/vuetify/pull/2780 :

Define show in the data (I think it should be set to false if you use v-model for the tooltip)
Add @click event to the button like this: @click="show = false"
For the tooltip you have 2 options: Add either v-if="show" or v-model="show"

Keep v-tooltip open when hovering over the tooltip

.v-tooltip__content has pointer-events:none set in vuetify.min.css. If you set it back to auto you allow it to be hovered.

When its hovered, its parent is hovered. And when its parent is hovered, it has a tooltip. So all you need is:

.v-tooltip__content {
  pointer-events: auto;
}

Vuetify V-Tooltip Unable to Change CSS