apache / apache/echarts

[Feature] tooltip.appendToBody with no scroll

Open
#17,625 4 comments 0 reactions 0 assignees View on GitHub
en new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

I'm using tooltip.appendToBody = true in order to be able to see all the tooltips properly. Everything works perfectly until I hover over a chart that's nearly outside of the screen.
![image](https://user-images.githubusercontent.com/32216320/188608113-d963f895-8a6d-4e29-ad89-f60bfc3c6798.png)

As you can see it overflows the body and therefore creates s scrollbar in the html element. In this screen the charts are inside a container with inner scroll, so it kind of messes up the scroll because the user can scroll outside the view:
![image](https://user-images.githubusercontent.com/32216320/188608505-688e5c9f-8368-466b-94fd-79ab0a738340.png)

Maybe it would be good to create the tooltip div inside of a relative layout that doesn't exceed the body size:

```html

.....


the tooltip as it is now

```

### What does the proposed API look like?

Add an option:

```ts
{
tooltip: {
appendToBodyConfine: boolean
}
}
```

which will add the overflow: hidden property to the tooltips parent container

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.