element [Bug Report] tooltip content too long and position cause tooltip beyond screen width

iyzzxitl 于 2022-10-26 发布在其他

关注(0)|答案(6)|浏览(138)

Element UI version

2.11.1

OS/Browsers version

macOS 10.13.6 / chrome 79.0.3928.4

Vue version

2.6.10

Reproduction Link

https://jsfiddle.net/1a6t47Lb/7/

Steps to reproduce

move mouse over the 'show tooltip' which has the style 'text-align:right' div the tooltip show but its position style is 'left: -12px' cause the tooltip content oversize the screen width. the same issue happened when the table column add show-overflow-tooltip property

What is Expected?

the tooltip should show all content and not oversize the screen width

What is actually happening?

the tooltip content oversize the screen width and its style "left: -12px"

Element

来源：https://github.com/ElemeFE/element/issues/17661

6条答案

按热度按时间

ve7v8dk21#

I take a look the source code, I find out the tooltip component actually using the popper.js to handle the placement, offset, and arrowOffset. Maybe it is a bug of popper.js.

赞(0）回复(0）举报 2022-10-26

jdg4fx2g2#

@lastingman ok

赞(0）回复(0）举报 2022-10-26

ctzwtxfj3#

@SunGuoQiang123 Set position as relative can resolve this

body {
  position: relative;
}

赞(0）回复(0）举报 2022-10-26

r8uurelv4#

@SunGuoQiang123 Set position as relative can resolve this

body {
  position: relative;
}

.el-tooltip__popper {
  word-break: break-all;
}

赞(0）回复(0）举报 2022-10-26

djp7away5#

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

赞(0）回复(0）举报 2022-10-26

avkwfej46#

Set tooltip max-width not more than viewport width, e.g.,
.el-tooltip__popper {
max-width: 90vw;
}

赞(0）回复(0）举报 2022-10-26