如何在Odoo v14中更改工具提示样式?



我想改变Odoo工具提示的样式(help="My help text"选项)。但我有问题,包括我的自定义风格。我想更改工具提示框的颜色、标题和字体大小。提示:我有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;
}

工具提示颜色被定义为变量,以自定义它们继承_assets_primary_variables模板。

例子:

xml:

<template id="tooltip_colors" name="Customize tooltip colors" inherit_id="web._assets_primary_variables">
<xpath expr="." position="inside">
<link rel="stylesheet" type="text/scss" href="/cusaf/static/src/scss/tooltip.scss"/>
</xpath>
</template>

scss:

$o-tooltip-background-color: rgb(42, 206, 75);
$o-tooltip-color: rgb(205, 35, 35);

工具提示样式在工具提示中定义。scss文件。要将工具提示文本字体粗体更改为粗体,可以使用以下命令:

.tooltip-inner {
font-weight: bold;
}

相关内容

  • 没有找到相关文章

最新更新