I am currently developing a web application where users can drag boxes containing words/phrases into a designated area. These boxes have tooltips that display the definition of the word when hovered over. I want the dragged boxes to fall into two columns within the area, but I'm encountering issues with tooltips breaking when they go beyond the edge of the column. Is there a solution to this problem?
#div1 {
float: left;
width: 328px;
height: 400px;
margin-left: 4px;
padding: 10px;
border: 1px solid black;
border-radius: 6px;
background-color: white;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
-moz-column-fill: auto;
column-fill: auto;
}
.box {
height: 54px;
width: 160px;
text-align: center;
background-color: white;
color: purple;
border: 1px solid black;
border-radius: 4px;
margin-bottom: 2px;
position: relative;
text-align: center;
}
.tooltiptext {
visibility: hidden;
width: 160px;
background-color: purple;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -80px;
}
.box:hover .tooltiptext {
visibility: visible;
}<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
{% for c in cards1 %}
<div id="drag{{c.id}}-{{c.carddata.position}}" class="box" draggable="true" ondragstart="drag(event)">
<span class="tooltiptext">{{c.carddata.description}}</span>
<div id="text{{c.id}}-{{c.carddata.position}}" class="text"><br>{{c.carddata.name}}</div>
</div>
{% endfor %}
</div>