Увеличить размер подсказки Angular 7

Question

Я работаю над проектом Angular 7. Я хотел бы отображать ng-шаблон при наведении курсора мыши на текст (h2). Это всплывающая подсказка.

Проблема в том, что я не могу увеличить размер (высоту и ширину) всплывающей подсказки.

Вот мой код:

HTML:

<div>
  <div class="modal-header">
    <h4 [ngbTooltip]="htmlContent" tooltipClass="my-custom-class">
      <fa-icon icon="info-circle"></fa-icon>
      Contrôle n° {{controle.numeroControle}}
    </h4>
  </div>


  <ng-template #htmlContent>
    <table>
      <caption>Tableau de données</caption>

      <tr>
        <th>Titre colonne 1</th>
        <th>Titre colonne 2</th>
        <th>Titre colonne 3</th>
        <th>Titre colonne 4</th>

      </tr>

      <tr>
        <td>cellule A1</td>
        <td>cellule B1</td>
        <td>cellule C1</td>
        <td>cellule D1</td>

      </tr>

      <tr>
        <td>cellule A2</td>
        <td>cellule B2</td>
        <td>cellule C2</td>
        <td>cellule D2</td>
      </tr>
    </table>
  </ng-template>
</div>

CSS:

.my-custom-class .tooltip-inner {
      background-color: darkgreen;
      font-size: 125%;
      height: 300px;
      width: 500px;
    }
    .my-custom-class .arrow::before {
      border-top-color: darkgreen;
    }

    table {
border: medium solid #000000;
width: 50%;
}
td, th {
border: thin solid #6495ed;
width: 50%;
}

Результат ...:

Как я могу увеличить этот размер?

Есть другой способ сделать это? Mousseover + Mousseleave + div? Как ?

Большое спасибо