You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2020/12/30 06:38:48 UTC
[GitHub] [incubator-echarts] realeve opened a new issue #13905: tooltip自定义背景色后，文字颜色无法修改
realeve opened a new issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905
### Version
5.0.0
### Steps to reproduce
tooltip自定义文字颜色无法生效
### What is expected?
测试
```js
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
```js
const TOOLTIP_NAME_TEXT_STYLE_CSS = 'font-size:12px;color:#6e7079';
```
导致用户在extraCSStext或者 textStyle中定义的内容无法生效；
### 建议
能否给tooltip加一个css，如 .echarts-tooltip，这样方便在css层自定义样式；
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
<!-- This issue is in English. DO NOT REMOVE -->
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] realeve commented on issue #13905: tooltip自定义背景色后，文字颜色无法修改
Posted by GitBox <gi...@apache.org>.
realeve commented on issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905#issuecomment-752605733
@plainheart 就是这意思，目前看来关键的属性(背景/字号/行距/边距/边框)等都被强制指定了，如果className无法控制这些属性，干脆就用 extraCssText 来指定，注入给 tooltip 的style中了.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang commented on issue #13905: tooltip自定义背景色后，文字颜色无法修改
Posted by GitBox <gi...@apache.org>.
pissang commented on issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905#issuecomment-752347512
I think https://github.com/apache/incubator-echarts/pull/13848 will fix it
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] echarts-bot[bot] commented on issue #13905: tooltip自定义背景色后，文字颜色无法修改
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905#issuecomment-752347230
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](http://echarts.apache.org/api.html) and [chart option](http://echarts.apache.org/option.html) 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 dev@echarts.apache.org. 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](https://echarts.apache.org/en/maillist.html).
Have a nice day! 🍵
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] realeve commented on issue #13905: tooltip自定义背景色后，文字颜色无法修改
Posted by GitBox <gi...@apache.org>.
realeve commented on issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905#issuecomment-752347807
@pissang @Ovilia 好的，感谢
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] plainheart commented on issue #13905: tooltip自定义背景色后，文字颜色无法修改
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905#issuecomment-752558498
style 的优先级确实要比 class 要高。`className` 的本意是允许用户可以直接通过CSS控制样式，而无需繁琐地配置 option，可以比较方便地添加一些其他样式属性，但要覆盖默认的 tooltip 样式暂时也只能通过 `!important` 来覆盖。
我不太觉得这没有意义。或者你的意思是指定了 `className` 之后，就应该完全忽略默认生成的 style 样式？
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] plainheart commented on issue #13905: tooltip自定义背景色后，文字颜色无法修改
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905#issuecomment-752417527
@realeve 抱歉，文档暂时还没有加上，后面会完善。
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang edited a comment on issue #13905: tooltip自定义背景色后，文字颜色无法修改
Posted by GitBox <gi...@apache.org>.
pissang edited a comment on issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905#issuecomment-752347512
Seems https://github.com/apache/incubator-echarts/pull/13848 will fix it
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] realeve closed issue #13905: tooltip自定义背景色后，文字颜色无法修改
Posted by GitBox <gi...@apache.org>.
realeve closed issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] realeve closed issue #13905: tooltip自定义背景色后，文字颜色无法修改
Posted by GitBox <gi...@apache.org>.
realeve closed issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] realeve commented on issue #13905: tooltip自定义背景色后，文字颜色无法修改
Posted by GitBox <gi...@apache.org>.
realeve commented on issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905#issuecomment-752500485
@plainheart
在tooltip不注入额外的样式（背景，字号，文字颜色等）的情况下，设置className，最终的样式会被ECharts的style所覆盖，最终这项功能基本没法使用，除非 强制设定为 !important ，这样就没意义了。
## 测试用例： https://echarts.apache.org/next/examples/zh/editor.html?c=line-simple
```js
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'
}
};
```
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] realeve commented on issue #13905: tooltip自定义背景色后，文字颜色无法修改
Posted by GitBox <gi...@apache.org>.
realeve commented on issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905#issuecomment-752402580
@plainheart 🙏，官方文档里面没看到有这项配置。
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] plainheart commented on issue #13905: tooltip自定义背景色后，文字颜色无法修改
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #13905:
URL: https://github.com/apache/incubator-echarts/issues/13905#issuecomment-752372085
> 能否给tooltip加一个css，如 .echarts-tooltip，这样方便在css层自定义样式；
@realeve 在 ECharts 5 中，我们已实现该特性。配置项为：`tooltip.className`。
#13383
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org