Как отобразить DIV «больше информации» при наведении, чтобы его можно было отображать за пределами родительского DIV

Question

Заранее благодарен за вашу помощь!

Для проекта я создаю среду трехмерного САПР, которая позволяет перетаскивать детали для создания элементов.На левой панели у меня есть изображения деталей, которые пользователь может перетащить и поместить в трехмерную среду.

Что мне нужно?
Когда пользователь наводит курсор на 'я '(дополнительная информация) изображение, я хочу, чтобы всплывающее DIV отображало, что это за деталь и как она вписывается в общую конструкцию (см. изображение 1).

Изображение 1: проблема

Проблема?
Поскольку всплывающая подсказка DIV находится внутри родительского DIV «инвентаря», она будет отображаться только в DIV «инвентаря».Это означает, что рассматриваемая деталь не может быть видна, так как всплывающий DIV блокирует ее (см. Рис. 1).Это большое нет-нет, и мне нужна помощь, чтобы вывести DIV вправо и за пределы основного DIV «инвентаря».

Я собираюсь переместить кнопку «i» вправо и затем хочу, чтобы информация DIV отображалась за пределами панели «Инвентарь» и где красная контурная белая фигура имеет вид: Что я ищу

Я пробовал много разных решений, но ни одно из них не работает!

Вот код:

Inventory 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
}