element-ui - Element UI 2.x Tooltip 滚动滚动条的时候 或者上下切换的时候 左侧hover气泡随上划移出屏幕 然后过一会又消失了，请问这种怎么解决？

Question

代码如下

 <div id="img-list" ref="imgList" class="img-list">
                <div
                    v-for="(item, index) in imageList.showList"
                    :id="'imgItem' + item.id"
                    :key="item.id"
                    class="img-for-box"
                >
                    <el-tooltip
                        v-if="item.thumbnail"
                        class="custom-tooltip"
                        effect="customized"
                        placement="right-start"
                        :show-after="1000"
                    >
                        <template #content>
                            <div class="tooltip-header">
                                <div class="img-tooltip-text">{{ item.name }}</div>
                            </div>
                            <div class="tooltip-line"></div>
                            <div class="tooltip-footer">
                                <div class="edit">
                                    <svg-icon
                                        class="opt-icon tip-span"
                                        :name="item.edit === '1' ? 'edited' : 'unedit'"
                                    ></svg-icon>
                                    <span class="tip-text">{{ item.edit === '1' ? '已编辑' : '未编辑' }}</span>
                                </div>
                                <div class="export">
                                    <svg-icon
                                        class="opt-icon tip-span"
                                        :name="item.export === '1' ? 'exported' : 'unexported'"
                                    ></svg-icon>
                                    <span class="tip-text">{{ item.export === '1' ? '已导出' : '未导出' }}</span>
                                </div>
                            </div>
                        </template>
                        <div
                            v-if="item.imgLoading !== 0"
                            class="img-box"
                        >
                            <img v-if="item.thumbnail" :src="item.thumbnail" />
                            <div v-if="!item.thumbnail" class="default-graph-box">
                                <svg-icon class="default-graph" name="default-graph"></svg-icon>
                            </div>
                        </div>
                        
                    </el-tooltip>
                </div>
            </div>

就是下面这种 现在是鼠标移动上去 hover出现没有问题

如果我鼠标滚动一下 他就会移出屏幕

Answer 1

因为 el-tooltip 的会和跟随绑定的元素移动哇。

如果你不想 el-tooltip 出现在顶部的 header-bar 的上方，给 <el-tooltip> 元素使用 popper-class 属性绑定一个样式。这个样式的 z-index 数值小于你的 header-bar 的 z-index 数值就好了。
或者把你的 header-bar 元素的 z-index 数值改大一些。

P.S. <el-tooltip> 元素的 z-index 默认基数是 2000