如何修改Odoo V14中Tooltip（提示框）的样式？

我想修改Odoo字段中help="My help text"对应的Tooltip（提示框）样式，具体要调整提示框颜色、标题样式并增大字号，但引入自定义样式时遇到了问题。

提示：我已安装backend_theme_v14，可能需要基于该主题覆盖样式。

以下是我目前的操作：

assets.xml #

注：我已引入一个js文件

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend" name="confirmation_assets" >
            <xpath expr="script[last()]" position="after">
                <script type="text/javascript"
                       src="/cusaf/static/src/js/confirmation.js"/>
            </xpath>
        </template>

      <template id="assets_backend_css" name="tooltip_assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">     
                 <link rel="stylesheet" href="/cusaf/static/src/css/tooltip.css"/>
            </xpath>       
         </template>  
    </data>
</odoo>

tooltip.css #

我不需要所有样式选项，仅希望修改提示框颜色、标题样式并增大字号

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

1. 修正CSS选择器，匹配Odoo原生Tooltip结构 #

Odoo字段的help提示框使用专属DOM类名，而非通用的.tooltip，结合backend_theme_v14的样式优先级，用以下精准选择器覆盖：

/* 字段help触发元素样式 */
.o_field_widget .oe_form_field_help {
    border-bottom: 1px dotted #502ae7;
}

/* 提示框主体样式 */
.o_tooltip {
    background-color: #2ace4b !important; /* 自定义背景色 */
    color: #cd2323 !important; /* 自定义文字颜色 */
    font-size: 14px !important; /* 增大基础字号 */
    padding: 8px 12px !important; /* 优化内边距 */
    width: auto; /* 自动适配内容宽度 */
}

/* 提示框标题样式（若存在标题） */
.o_tooltip .tooltip-title {
    font-weight: bold !important; /* 标题加粗 */
    font-size: 16px !important; /* 标题字号 */
    margin-bottom: 4px; /* 标题与内容间距 */
}

2. 优化assets.xml的样式引入逻辑 #

无需拆分两个模板继承，将CSS放在最后引入，确保优先级高于backend_theme_v14：

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend" name="custom_assets" >
            <!-- 引入JS -->
            <xpath expr="script[last()]" position="after">
                <script type="text/javascript" src="/cusaf/static/src/js/confirmation.js"/>
            </xpath>
            <!-- 引入CSS，放在末尾确保覆盖主题样式 -->
            <xpath expr="link[last()]" position="after">
                <link rel="stylesheet" href="/cusaf/static/src/css/tooltip.css"/>
            </xpath>
        </template>
    </data>
</odoo>

3. 验证生效步骤 #

1. 升级模块：执行./odoo-bin -u cusaf
2. 清除浏览器缓存（快捷键Ctrl+Shift+R）
3. 打开Odoo表单页面，hover字段的help图标查看效果

内容的提问来源于stack exchange，提问作者Ernesto Ruiz