[Bug]: 1 tooltip 出现位置 如果tooltip 有一定高度，部分内容不可见 2tooltip 内容过长产生滚动条， 滚动条不可以用滚轮滚动

[lishixin2218]

Describe the bug / 问题描述

getContent: (e, items) => {
let names = items[0].data || [];

          let str = '';
          for (let i = 0; i < names .length; i++) {
            str += `<div class="list-item"
              onmouseover="this.style.background='#ccc'"
              onmouseout="this.style.background='transparent'"
           
            >${names [i]}</div>`;
          }

          return `
            <div class="node">
              <div >
             列表
              </div>
              ${str}
            </div>
          `;
        },
        style: {
          '.node': {
            'max-width': '400px',
            'max-height': '500px',
            'overflow-y': 'auto',          
          },

        },

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

📝 To help us better understand and address your issue, please provide more information, or use the standard format, otherwise we will not process this issue.

Reference document:

• Creating an issue
• Basic writing and formatting syntax

---

📝 为了帮助我们更好地理解和解决你的问题，请提供更多信息，或者使用规范的格式，否则我们不会处理这个 issue。

参考文档：

• 创建议题
• 基本撰写和格式语法

[lishixin2218]

import { Graph } from '@antv/g6';

const graph = new Graph({
container: 'container',
width: 700,
height: 400,
background: '#ccc',
data: {
nodes: [
{ id: '0', data: { label: 'node-0', description: 'This is node-0.' } },
{ id: '1', data: { label: 'node-1', description: 'This is node-1.' } },
{ id: '2', data: { label: 'node-2', description: 'This is node-2.' } },
{ id: '3', data: { label: 'node-3', description: 'This is node-3.' } },
{ id: '4', data: { label: 'node-4', description: 'This is node-4.' } },
{ id: '5', data: { label: 'node-5', description: 'This is node-5.' } },
],
edges: [
{ source: '0', target: '1', data: { description: 'This is edge from node 0 to node 1.' } },
{ source: '0', target: '2', data: { description: 'This is edge from node 0 to node 2.' } },
{ source: '0', target: '3', data: { description: 'This is edge from node 0 to node 3.' } },
{ source: '0', target: '4', data: { description: 'This is edge from node 0 to node 4.' } },
{ source: '0', target: '5', data: { description: 'This is edge from node 0 to node 5.' } },
],
},
layout: {
type: 'grid',
},
plugins: [
{
type: 'tooltip',
enterable : true,
getContent: (e, items) => {
let result = <h4>Custom Content</h4>;
items.forEach((item) => {
for(let i = 0; i < 20; i++) {
result += <p onmouseover="this.style.background='#ccc'" onmouseout="this.style.background='transparent'">Type: ${i} ${item.data.description}</p>;
}
});
return <div class="test-class"> ${ result} </div>;
},
style: {
'.test-class' : {
width: '200px',
height: '300px',
'overflow-y': 'auto'
}
}
},
],
behaviors: ['drag-canvas', 'drag-element'],
});

graph.render();

你们文档上的例子 灰色部分是容器范围 tooltip 超出了容器
不能滚动的问题没有测试出来 我使用的是5.0.26

[XiaoMing-xmg666]

@lishixin2218 我试了一下你上面给的例子，看起来没问题啊