Vuetify v-tooltip unable to change css

Question

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

Answer 1

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