Can I get span element to ignore columns?

Question

I am creating a web app in which the user drags boxes containing words/phrases into an area. When the user mouses over the boxes, a tool-tip is displayed with the definition of the word. When the user drags boxes into the areas, I would like them to fall into two columns. However when using columns, the tooltip breaks when going over the edge of the area. Is there any way to fix this?

How tooltips are at the moment

How I would like them to be

#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>

Answer 1

If you reset display of .box to inline-block, it will not span to next column :

#div1 {
  float: left;
  width: 328px;
  height: 250px;
  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 {
display:inline-block;/* to keep in a single column */
  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">
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
</div>

---

Since you use a fixed height, You may also want to consider the flex approach setting these rules on parent

  display:flex;
  flex-flow:column wrap;

(column CSS are still at experimental state and seems not to evolve anymore)

#div1 {
  float: left;
  width: 328px;
  height: 250px;
  margin-left: 4px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 6px;
  background-color: white;
   display:flex;
  flex-flow:column wrap; 
}

.box {
  height: 54px;
  width: 160px;
  margin:0 5px 0 0;
  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">
 
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
  <div  class="box">
    <span class="tooltiptext">c.carddata.description c.carddata.description c.carddata.description c.carddata.description c.carddata.description</span>
    <div class="text">c.carddata.name<br/>c.carddata.name</div>
  </div>
</div>