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/06/09 16:27:39 UTC
[GitHub] [incubator-echarts] 0x018 opened a new issue #12778: tooltip无法自动关闭
0x018 opened a new issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778
### Version
4.5.0
### Steps to reproduce
代码:
```
option = {
tooltip: {
trigger: 'item',
formatter: `<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-向左水平移动鼠标<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-向左水平移动鼠标<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-向左水平移动鼠标<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-<-`,
enterable:true,
position:['-30%','50%']
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接访问']
},
series: [
{
name: '访问来源',
type: 'pie',
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false,
},
data: [
{value: 335, name: '直接访问'}
]
}
]
};
```
步骤:
1. 鼠标移动到圆圈上,出现tooltip
2. 鼠标移动到tooltip上
3. 鼠标沿着tooltip水平向左移动, 直到移出tooltip
4. tooltip不会消失
初步猜测原因:
tooltip超出echarts时, 鼠标在tooltip上直接移出时,不会触发tooltip的消失事件. 必须先移动到echarts上,再移出才会触发.
### What is expected?
tooltip在 enterable:true的情况下,鼠标移出后,tooltip不一定会消失
### What is actually happening?
鼠标不在echarts及他的tooltip上时, tooltip能正常消失
<!-- This issue is generated by echarts-issue-helper. 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] gaofanni edited a comment on issue #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
gaofanni edited a comment on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-647865895
> > `enterable` 为 `true` 的时候，代表用户可以进入`tooltip`区域中进行操作，又由于你这个`tooltip`非常长，在`tooltip`上移动鼠标直到移出去应该没有侦测你是移出图表了，所以并未隐藏。考虑设置 `enterable` 为 `false` 或者手动派发Action隐藏
> > ```js
> > dispatchAction({
> > type: 'hideTip'
> > })
> > ```
>
> 1. 调用dispatchAction hideTip, 我也不知道什么时候移出
> 2. 有临时解决方案
> 3. 提issue是因为你们用这个bug坑了我,所以我用这个issue坑回来
>
> 临时方案:
>
> 1. tooltip设置: `enterable: false,hideDelay:2000 `
> 2. 全局css添加:
>
> ```
> .echarts>div[style]:nth-child(2){
> pointer-events: all !important; /*强制tooltip响应事件*/
> }
> .echarts>div[style]:nth-child(2):hover {
> display: block !important; /*强制鼠标在时tooltip不消失*/
> }
> ```
对appendToBody=true的用echarts类名会找不到
可以在tooltip.position的函数回调内拿到tooltip的dom节点，进行监听隐藏
```
chartOptions.tooltip.position = (point, params, dom: HTMLElement) => {
dom.onmouseleave = () => {
dom.style.display = 'none'
}
}
```
----------------------------------------------------------------
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] 100pah closed issue #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
100pah closed issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778
----------------------------------------------------------------
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] ViavaCos edited a comment on issue #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
ViavaCos edited a comment on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-749392817
@wsz7777 我在移动端使用Echarts时碰到了无法自动关闭tooltip的情况
找了不少方法，最后用这个方法解决的，可以试试，不知道是否有什么隐患否？@plainheart
用hideTip只是tooltip没了但是那条竖线和点都还在....
`
dispatchAction({
type: 'showTip',
x: 0,
y: 0
})
`
----------------------------------------------------------------
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] jinjiaxing commented on issue #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
jinjiaxing commented on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-757134753
> @wsz7777 这个问题应该在5.0版本修复，可以尝试一下。#13382
5.0也是有这个问题呀，我提了issue 说是在5.0.1 fix，但现在还是没有 fix
----------------------------------------------------------------
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] jinjiaxing commented on issue #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
jinjiaxing commented on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-757134753
> @wsz7777 这个问题应该在5.0版本修复，可以尝试一下。#13382
5.0也是有这个问题呀，我提了issue 说是在5.0.1 fix，但现在还是没有 fix
----------------------------------------------------------------
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] gaofanni edited a comment on issue #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
gaofanni edited a comment on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-647865895
> > `enterable` 为 `true` 的时候，代表用户可以进入`tooltip`区域中进行操作，又由于你这个`tooltip`非常长，在`tooltip`上移动鼠标直到移出去应该没有侦测你是移出图表了，所以并未隐藏。考虑设置 `enterable` 为 `false` 或者手动派发Action隐藏
> > ```js
> > dispatchAction({
> > type: 'hideTip'
> > })
> > ```
>
> 1. 调用dispatchAction hideTip, 我也不知道什么时候移出
> 2. 有临时解决方案
> 3. 提issue是因为你们用这个bug坑了我,所以我用这个issue坑回来
>
> 临时方案:
>
> 1. tooltip设置: `enterable: false,hideDelay:2000 `
> 2. 全局css添加:
>
> ```
> .echarts>div[style]:nth-child(2){
> pointer-events: all !important; /*强制tooltip响应事件*/
> }
> .echarts>div[style]:nth-child(2):hover {
> display: block !important; /*强制鼠标在时tooltip不消失*/
> }
> ```
对appendToBody=true的用echarts类名会找不到
可以在tooltip.position的函数回调内拿到tooltip的dom节点，进行监听隐藏
```
chartOptions.tooltip.position = (point, params, dom: HTMLElement) => {
const hideDom = () => {
dom.style.display = 'none'
dom.removeEventListener('mouseleave', hideDom)
}
dom.addEventListener('mouseleave', hideDom)
}
```
----------------------------------------------------------------
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] gaofanni edited a comment on issue #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
gaofanni edited a comment on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-647865895
> > `enterable` 为 `true` 的时候，代表用户可以进入`tooltip`区域中进行操作，又由于你这个`tooltip`非常长，在`tooltip`上移动鼠标直到移出去应该没有侦测你是移出图表了，所以并未隐藏。考虑设置 `enterable` 为 `false` 或者手动派发Action隐藏
> > ```js
> > dispatchAction({
> > type: 'hideTip'
> > })
> > ```
>
> 1. 调用dispatchAction hideTip, 我也不知道什么时候移出
> 2. 有临时解决方案
> 3. 提issue是因为你们用这个bug坑了我,所以我用这个issue坑回来
>
> 临时方案:
>
> 1. tooltip设置: `enterable: false,hideDelay:2000 `
> 2. 全局css添加:
>
> ```
> .echarts>div[style]:nth-child(2){
> pointer-events: all !important; /*强制tooltip响应事件*/
> }
> .echarts>div[style]:nth-child(2):hover {
> display: block !important; /*强制鼠标在时tooltip不消失*/
> }
> ```
对appendToBody=true的用echarts类名会找不到
可以在tooltip.position的函数回调内拿到tooltip的dom节点，进行监听隐藏
```
chartOptions.tooltip.position = (point, params, dom: HTMLElement) => {
dom.onmouseleave = () => {
dom.style.display = 'none'
}
}
```
----------------------------------------------------------------
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] gaofanni commented on issue #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
gaofanni commented on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-647865895
> > `enterable` 为 `true` 的时候，代表用户可以进入`tooltip`区域中进行操作，又由于你这个`tooltip`非常长，在`tooltip`上移动鼠标直到移出去应该没有侦测你是移出图表了，所以并未隐藏。考虑设置 `enterable` 为 `false` 或者手动派发Action隐藏
> > ```js
> > dispatchAction({
> > type: 'hideTip'
> > })
> > ```
>
> 1. 调用dispatchAction hideTip, 我也不知道什么时候移出
> 2. 有临时解决方案
> 3. 提issue是因为你们用这个bug坑了我,所以我用这个issue坑回来
>
> 临时方案:
>
> 1. tooltip设置: `enterable: false,hideDelay:2000 `
> 2. 全局css添加:
>
> ```
> .echarts>div[style]:nth-child(2){
> pointer-events: all !important; /*强制tooltip响应事件*/
> }
> .echarts>div[style]:nth-child(2):hover {
> display: block !important; /*强制鼠标在时tooltip不消失*/
> }
> ```
对appendToBody=true的用echarts类名会找不到
可以在tooltip.position的函数回调内拿到tooltip的dom节点，进行监听隐藏
chartOptions.tooltip.position = (point, params, dom: HTMLElement) => {
dom.onmouseleave = () => {
dom.style.display = 'none'
}
}
----------------------------------------------------------------
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] wsz7777 commented on issue #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
wsz7777 commented on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-748587484
很糟心的是，现在这个bug依然有~~~ "echarts": "^4.9.0", 什么时候更新？
----------------------------------------------------------------
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 #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-748590016
@wsz7777 这个问题应该在5.0版本修复，可以尝试一下。#13382
----------------------------------------------------------------
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] 0x018 commented on issue #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
0x018 commented on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-641090889
----------------------------------------------------------------
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 #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-641087770
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 questions.
If you are interested in the project, you may also subscribe our [mail 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] plainheart commented on issue #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-641101561
----------------------------------------------------------------
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] ViavaCos commented on issue #12778: tooltip无法自动关闭
Posted by GitBox <gi...@apache.org>.
ViavaCos commented on issue #12778:
URL: https://github.com/apache/incubator-echarts/issues/12778#issuecomment-749392817
@wsz7777 我在移动端使用Echarts时碰到了无法字段关闭tooltip的情况
找了不少方法，最后用这个方法解决的，可以试试，不知道是否有什么隐患否？@plainheart
`
dispatchAction({
type: 'showTip',
x: 0,
y: 0
})
`
----------------------------------------------------------------
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