Card and Tooltip templates not working together

[Benjamin V]

Hi,

I'm trying to get a card template and a tooltip template to work together but when I try to add a card template while there already is a tooltip template, the tooltips are not displayed anymore.
Each template seems to work fine on it's own, but never together.

Here is the code below. Am I missing something ? Is there any way to make it work ?

<ejs-kanban

  keyField="Status"

  [dataSource]="data"

  [cardSettings]="cardSettings"

  enableTooltip="true"

>

  <e-columns>

    <e-column headerText="To do" keyField="Open"></e-column>

    <e-column headerText="In Progress" keyField="InProgress"></e-column>

    <e-column headerText="Testing" keyField="Testing"></e-column>

    <e-column headerText="Done" keyField="Close"></e-column>

  </e-columns>

  <ng-template #tooltipTemplate let-data>

    <div class="e-kanbanTooltipTemp">

      <table>

        <tr>

          <td class="details">

            <table>

              <colgroup>

                <col style="width:30%" />

                <col style="width:70%" />

              </colgroup>

              <tbody>

                <tr>

                  <td class="CardHeader">Assignee:</td>

                  <td>{{ data.Assignee }}</td>

                </tr>

                <tr>

                  <td class="CardHeader">Type:</td>

                  <td>{{ data.Type }}</td>

                </tr>

                <tr>

                  <td class="CardHeader">Estimate:</td>

                  <td>{{ data.Estimate }}</td>

                </tr>

                <tr>

                  <td class="CardHeader">Summary:</td>

                  <td>{{ data.Summary }}</td>

                </tr>

              </tbody>

            </table>

          </td>

        </tr>

      </table>

    </div>

  </ng-template>

  <ng-template #cardSettingsTemplate let-data>

    <div

      class="card-template"

    >

      <div class="e-card-header">

        <div class="e-card-header-caption">

          <div class="e-card-header-title">

            {{ data.Title }}

          </div>

        </div>

      </div>

      <div class="e-card-content">

        <div class="e-text">{{ data.Summary }}</div>

      </div>

    </div>

  </ng-template>

</ejs-kanban>

[Buvana Sathasivam]

Hi Benjamin,

Greetings from Syncfusion support.

We were able to reproduce your reported issue based on your shared code. We let you know that the ‘e-tooltip-text’ class name needs to be added to a customized card element to show the tooltip template content. In your shared code, you are using a card template. So, we suggest including the "e-tooltip-text" class name in the card parent element to show the tooltip. Please find the below code and sample for your reference.

    <ejs-kanban enableTooltip="true"…>

      <ng-template #cardSettingsTemplate let-data>

        <div class="card-template e-tooltip-text">

          ………..

        </div>

      </ng-template>

    </ejs-kanban>

Sample: https://stackblitz.com/edit/angular-xzqtvy?file=app.component.html

Documentation: https://ej2.syncfusion.com/angular/documentation/kanban/tooltip/

Regards,

Buvana S