悬停时如何显示“更多信息” DIV，以便可以将其显示在父DIV之外

Question

在此先感谢您的帮助！

对于一个项目，我正在创建一个3D CAD环境，允许用户拖放零件来构建事物。在左侧面板上，我有用户可以在3D环境中拖动并放置的零件图像。

我需要什么？
当用户将鼠标悬停在“ i”（更多信息）图像上时，我希望弹出DIV显示部件是什么以及部件如何适应他们正在构建的整体结构（参见图1）。

Image 1: Problem

问题？
由于弹出的“工具提示” DIV位于父“清单” DIV中，因此它将仅显示在“清单” DIV中。这意味着当弹出的DIV阻止了它时，该部分就不能被看到（参见图1）。这是一个很大的禁忌，我需要帮助才能使DIV显示在右侧的主“库存” DIV之外。

我要向右移动'i'按钮，然后希望将信息DIV显示在'库存'面板之外，红色轮廓的白色形状是： What I am after

我尝试了许多不同的解决方案，但是没有用！

代码如下：

库存DIV

		<div class="inventory">
				<h1>Inventory</h1>
				<p id="parts"></p>
				<div class = buttonSet onmouseenter ="scroller.stopZoom()" onmouseleave="scroller.startZoom()">


					<div class="eachPart">
						<div class="tooltip">
							<!-- Image used here is from icons8.com -->
							<img src="Images/icons8-info-64.png" alt="Image of the information icon">
  							<span class="tooltiptext">This is the bottom part of the robot. It holds the servos and the battery so that they don't move around while the robot is moving.</span>
						</div>
						<button onmousedown="dragger.whenClicked(0)" id="dragButton1" class = "dragButton" draggable='false'>
							<p class=multiplier>x1</p>
							<img class="resize" src="Images/Bottom.png" alt="Image of the bottom part">
						</button>
					</div>

库存CSS

.inventory > h1{
	font-size: 20px;
	color: black;
	opacity:1.0;
	text-align: center;
}
.inventory > div > div > button{
	align-items: right;
}

.inventory  {
    font-family: "Gill Sans", sans-serif;
    position: absolute;
    top: 100px;
    right:25%;
    left: 3%;
    width: 190px;
    height: 73%;
    background-color: rgba(255,210,63,0.5);
    padding-top: 2em;
    padding-bottom: 2em;
    padding-left: 0em;
    padding-right: 0em;
    border: 3px solid #000;
    border-radius: 20px;
    margin-right: 50px;
	/*z-index: 1;*/
}

.buttonSet{
  height: 100%;
  padding-left: 3em;
  overflow-y: scroll;
}

工具提示弹出CSS

/*Info icon right next to each part in the inventory panel*/
.tooltip {
	font-family: "Gill Sans", sans-serif;
    position: relative;
    display: inline-block;
	/*padding-right:3px;
	padding-left: 3px;
	border: 1px solid #000;
	border-radius:5px;
	background: white;*/
	left: -25%;
	top: 55px;

}

.tooltip .tooltiptext {
	font-family: "Gill Sans", sans-serif;
    visibility: hidden;
    width: 115px;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    /* Position the tooltip */
    position: absolute;
    z-index: 2;
	padding:10px;
    top: -5px;
    left: 105%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip > img{
	max-width:30px;
	max-height: 30px
}