CODEWITHSUNDEEP
cssvue.jsvuetify.js
BeaST 30
BeaST 30

Reputation: 744

Vuetify v-tooltip unable to change css

I am using v-tooltip of Vuetify and I want to make minor changes in its CSS like opacity: 1 and inner padding: 0. But I am unable to changes any CSS on it. Can someone help please?

.v-tooltip {
    font-size: 50px !important;
    opacity: 1 !important;
}

And this is my vue code:

  <v-tooltip bottom>
    <template v-slot:activator="{ on }">
      <a
        v-on="on"
        @mouseover="mouseOver(item)"
        @mouseleave="mouseLeave(item)"
      >{{ item.name }}</a>
    ...continued

Upvotes: 12

Views: 17133

Answers (3)

j4v1
j4v1

Reputation: 1587

  • Vue version: ^3.3.4
  • Vuetify version: ^3.3.7

The solution that I found worked is to set the content-class attribute in the v-tooltip template element, then in the <style scoped> use a global css definition:

In the template:

<v-tooltip
  v-model="showTooltip"
  content-class="custom-tooltip"
  ... <!-- other attributes.. -->
>
...
</v-tooltip>

In the scoped style:

<style lang="scss" scoped>
:global(.custom-tooltip) {
  font-size: 0.625rem !important;
  opacity: 1 !important; // This did not set the opacity to 100% opaque
  background-color: rgba(var(--v-theme-surface-variant), 1) !important; // This made the tooltip opacity fully opaque
  padding: 0.1rem 0.3rem !important;
  transform: translate(-0.7rem -0.8rem);
}
</style>

Upvotes: 5

hwgn
hwgn

Reputation: 140

For newer versions of Vuetify, the solution provided by @dreijntjens no longer works. The classes have changed, and the display-attribute shouldn't be touched as this is how the tooltip is initially hidden.

Here's CSS to darken the background of the overlay and increasing the font size:

.v-tooltip > .v-overlay__content {
  background-color: rgba(var(--v-theme-surface-variant), 0.9) !important;
  font-size: 50px !important;
}

Upvotes: 7

dreijntjens
dreijntjens

Reputation: 4825

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

Upvotes: 14

Related Questions