tooltip自定义背景色后，文字颜色无法修改

[realeve]

Version

5.0.0

Steps to reproduce

tooltip自定义文字颜色无法生效

What is expected?

测试

option = {
    xAxis: { 
        data: ['Mon', 'Tue']
    },
    yAxis: {
        type: 'value'
    },
    backgroundColor:'#333',
    darkMode:true,
      tooltip: {
        backgroundColor: 'rgba(48, 54, 64, 0.8)', 
        extraCssText:
          'color:#fff;border-radius: 3px;border:none;',
        textStyle: {
          color: '#fff',
          fontSize: 12, 
        }, 
      },
    series: [{
        data: [150, 230],
        type: 'bar'
    }]
};

What is actually happening?

在tooltip生成的dom结点，文字颜色被固定为了：#6E7079 ,

对应源码中的：https://github.com/apache/incubator-echarts/blob/master/src/component/tooltip/tooltipMarkup.ts#L406

const TOOLTIP_NAME_TEXT_STYLE_CSS = 'font-size:12px;color:#6e7079';

导致用户在extraCSStext或者 textStyle中定义的内容无法生效；

建议

能否给tooltip加一个css，如 .echarts-tooltip，这样方便在css层自定义样式；

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[pissang]

Seems #13848 will fix it

[realeve]

@pissang @Ovilia 好的，感谢

[plainheart]

能否给tooltip加一个css，如 .echarts-tooltip，这样方便在css层自定义样式；

@realeve 在 ECharts 5 中，我们已实现该特性。配置项为：tooltip.className。
#13383

[realeve]

@plainheart 🙏，官方文档里面没看到有这项配置。

[plainheart]

@realeve 抱歉，文档暂时还没有加上，后面会完善。

[realeve]

@plainheart
在tooltip不注入额外的样式（背景，字号，文字颜色等）的情况下，设置className，最终的样式会被ECharts的style所覆盖，最终这项功能基本没法使用，除非 强制设定为 !important ，这样就没意义了。

测试用例： https://echarts.apache.org/next/examples/zh/editor.html?c=line-simple

var style=`.echarts-tooltip {  
  background-color: rgba(48, 54, 64, 0.8);
  color: rgb(224, 224, 227);
  font-size: 12px ;
  line-height: 18px;
  font-family:  'Unica One', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  padding: 12px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px;
  border-radius: 3px;
  border: none; 
  backdrop-filter: saturate(180%) blur(20px);
}
`;

/* 注入style  */
const appendStyle = (style)=>{ 
    var ele=document.createElement("style");
    ele.innerHTML=style;
    document.getElementsByTagName('head')[0].appendChild(ele)
}

appendStyle(style); 

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }],
    tooltip:{
        className:'echarts-tooltip'
    }
}; 

[plainheart]

style 的优先级确实要比 class 要高。className 的本意是允许用户可以直接通过CSS控制样式，而无需繁琐地配置 option，可以比较方便地添加一些其他样式属性，但要覆盖默认的 tooltip 样式暂时也只能通过 !important 来覆盖。
我不太觉得这没有意义。或者你的意思是指定了 className 之后，就应该完全忽略默认生成的 style 样式？

[realeve]

@plainheart 就是这意思，目前看来关键的属性(背景/字号/行距/边距/边框)等都被强制指定了，如果className无法控制这些属性，干脆就用 extraCssText 来指定，注入给 tooltip 的style中了.