CODEWITHSUNDEEP
angular
SFinney
SFinney

Reputation: 3

Display additional information when hovering over a table cell using Angular7/Bootstrap

I'm working on a practice website where I have created a table. My goal is to display some type of a pop up message when you hover over a specific cell in the table. I'm unsure of how to do this and haven't been successful while searching. I'm currently using Angular 7/Bootstrap with Visual Studio Code.

HTML file

<table class="table table-bordered table-condensed table-responsive table-hover-cells" >
  <thead>
    <th>Wood Type</th>
  </thead>
  <tbody>
    <tr class="active">
      <td (click)="">Acacia</td>
      <td>Hazel</td>
    </tr>
    <tr class="active">
      <td>Alder</td>
      <td>Holly</td>
    </tr>
    <tr class="active">
      <td>Apple</td>
      <td>Hornbeam</td>
    </tr>
  </tbody>
</table>

CSS file (This was found online, I didn't write this myself. Unaware of exactly how it works but it does.)

 .table-hover-cells > tbody > tr > th.active:hover,
 .table-hover-cells > tbody > tr > td.active:hover,
 .table-hover-cells > tbody > tr.active > th:hover,
 .table-hover-cells > tbody > tr.active > td:hover {
  background-color: #e8e8e8;}

Upvotes: 0

Views: 2199

Answers (1)

Flash
Flash

Reputation: 1014

I would recommend using Material Design and using the tooltip: https://material.angular.io/components/tooltip/overview

 <button mat-raised-button
        matTooltip="Info about the action"
        aria-label="Button that displays a tooltip when focused or hovered over">
  Action
</button>

Upvotes: 1

Related Questions