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>

G-Cyrillus · Accepted Answer · 2017-08-30T13:52:14.353

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>

Sorry, doesn't work. When I add `display: inline-block` it puts the boxes into two rows and the tooltips still spill over the columns. — Seamang64, Aug 30 '17 at 10:14
@Seamang64 Which browser is it ? Does the snippet have the same behavior you describe ? display:inline-block is meant to avoid the box to break and span into different columns. Column CSS never got finalised and are still experimental(grid and flex are taking over). Would you consider using flex/flex-flow:column wrap ? https://codepen.io/gc-nomade/pen/vJQMja — G-Cyrillus, Aug 30 '17 at 11:31
I've been using chrome. I've now tested on firefox and it does work there. You code snippet works on firefox but not on chrome. I will give flex/flex-flow: column wrap a try. — Seamang64, Aug 30 '17 at 12:19

Can I get span element to ignore columns?

1 Answers1