Bulma: Show card on hover table cell?

Question

I'm trying to display a Bulma card when user hovers a certain cell in a table, but I can't get it to work.

My own CSS file to complement the Bulma framework:

  .has-details {
    position: relative;
  }



  .details {
    position: absolute;
    top: 0;
    transform: translateY(70%) scale(0);
    transition: transform 0.1s ease-in;
    transform-origin: left;
    display: inline;
    background: white;
    z-index: 20;
    min-width: 100%;
    padding: 1rem;
    border: 1px solid black;
  }



  .has-details:hover span {
    transform: translateY(70%) scale(1);

Then some HTML:

      <td class="has-details has-background-danger"><div class="details card">
        <div class="card-content">
          <div class="content">
            Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
          </div>
        </div>
      </div></td>

Is it not possible to display the Bulma card on hover?

Answer 1

your selector should be .has-details:hover .details

your td should match two constraints :

• be embed in a table
• have a content to be hoverable

.details {
    position: absolute;
    top: 0;
    transform: translateY(70%) scale(0);
    transition: transform 0.1s ease-in;
    transform-origin: left;
    display: inline;
    background: white;
    z-index: 20;
    min-width: 100%;
    padding: 1rem;
    border: 1px solid black;
}

.has-details:hover .details {
    transform: translateY(70%) scale(1);
}

<table>
<td class="has-details has-background-danger">
hover me
  <div class="details card">
    <div class="card-content">
      <div class="content">
        Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
      </div>
    </div>
  </div>
</td>
</table>