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
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;
}
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;
}
.v-tooltip > .v-overlay__content to .v-tooltip :deep(.v-overlay__content)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>
