Skip to Content
Menu
This question has been flagged
1 Reply
2554 Views

 I want to change the style of Odoo tooltip (help="My help text" option in fields). But I am having probles including my custom style. I want to change the color of the tooltip box, heading and font size. Hint: I have backend_theme_v14, so maybe i need to put my style on top of that. This is what I have done so far:

https://stackoverflow.com/questions/75940325/how-to-change-style-of-tooltip-in-odoo-v14

assets.xml

Note that i already had a js file included



tooltip.css

I don't need every option. I just want to change the color of the tooltip box. the heading and make the font size bigger


/* Tooltip container */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted rgb(80, 42, 231); /* If you want dots under the hoverable text */ } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: rgb(42, 206, 75); color: rgb(205, 35, 35); text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text - see examples below! */ position: absolute; z-index: 1; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; }
    
Avatar
Discard
Best Answer

Hi,

Instead of a tooltip try o-tooltip

.o-tooltip {
position: relative;
display: inline-block;
background: red;
border-bottom: 1px dotted rgb(80, 42, 231); /* If you want dots under the hoverable text */
}

/* Tooltip text */
.o-tooltip .o-tooltip--technical--title {
visibility: hidden;
width: 120px;
background-color: rgb(42, 206, 75);
color: rgb(205, 35, 35);
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.o-tooltip:hover .o-tooltip--technical--title {
visibility: visible;
}

Regards

Avatar
Discard
Related Posts Replies Views Activity
0
Apr 22
1975
1
Feb 22
3470
1
Feb 24
11570
1
May 25
696
2
May 25
1265