apache / apache/echarts

[Bug] Echarts - Tooltip goes out of page/window if text is long

Open
#16,699 18 comments 5 reactions 0 assignees View on GitHub
bug en pending waiting-for: community
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.3.0

### Link to Minimal Reproduction

_No response_

### Steps to Reproduce

If content is bit long in tooltip, it goes out of screen. so, I tooltip content need to have specific width and content should fit inside the given width with using options.
without using any custom class and style(css).

### Current Behavior

Bar(vertical) echart-
If text is long the Tooltip goes out of window/page on hover bar, not able to wrap the text with in the given width.
when tooltip goes out of window/page, scroll bar appears in the bottom of the window/page.

And in the small screen(1366*768) the first bar of axislabel disappears, you can see in the screen shot. even if add interval as 0
"axisLabel": {
"show": true,
"interval": "0",
}

below is the screen shot of tooltip and bottom axislabel issue
![tooltipissue](https://user-images.githubusercontent.com/45749990/158936740-a0a920f1-d440-4fb0-a80b-874c5489ced1.png)

### Expected Behavior

Bar(vertical) echart-
If text is long the Tooltip should not go out of window/page on hover bar. when specific width is given to tooltip, the text should come in next line.

In the small screen(1366*768) the first bar of axislabel should appear.

scroll bar should not appears in the bottom of the window/page.

### Environment

```markdown
- OS:Ubuntu
- Browser: Chrome
- Framework: Echart
```

### Any additional comments?

_No response_

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.