Angular JS实现鼠标悬停时逗号分隔列表转表格展示

Got it, let's fix that tooltip to show a clean table instead of comma-separated values. Since you're using PrimeNG (from the p-column component) and Angular, here's how to do it:

Step 1: Create a Pipe to Split Comma-Separated Values #

First, we need to turn that comma-separated string into an array we can loop over. Create a simple pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'splitComma' })
export class SplitCommaPipe implements PipeTransform {
  transform(value: string): string[] {
    // Split the string and trim whitespace from each item
    return value ? value.split(',').map(item => item.trim()) : [];
  }
}

Don't forget to add this pipe to your module's declarations array.

Step 2: Modify the Column Template with a Custom Tooltip #

Replace your existing column template with this. We'll use PrimeNG's pTooltip directive along with a template to render the table:

<p-column field="tdst" header="TDST" [style]="{'text-align': 'left'}">
  <ng-template let-row="rowData" pTemplate="body">
    <!-- The element that triggers the tooltip -->
    <span 
      pTooltip 
      [tooltip]="tooltipContent" 
      [tooltipOptions]="{escape: false}"
      [tooltipContext]="{row: row}"
    >
      {{ row.tdst }}
    </span>

    <!-- The tooltip template with a table -->
    <ng-template #tooltipContent let-context>
      <table style="border-collapse: collapse; min-width: 200px;">
        <tbody>
          <tr *ngFor="let item of context.row.tdlist | splitComma">
            <td style="border: 1px solid #e0e0e0; padding: 6px 10px;">{{ item }}</td>
          </tr>
        </tbody>
      </table>
    </ng-template>
  </ng-template>
</p-column>

Step 3: Add Required Modules #

Make sure you've imported TooltipModule from primeng/tooltip in your module:

import { TooltipModule } from 'primeng/tooltip';

@NgModule({
  imports: [
    // ... other imports
    TooltipModule
  ],
  declarations: [
    // ... other components
    SplitCommaPipe
  ]
})
export class YourModule { }

What's Happening Here? #

• The splitComma pipe takes your comma-separated row.tdlist string and turns it into an array of trimmed values.
• The pTooltip directive uses a custom template (#tooltipContent) instead of plain text. We pass the row data to the template using [tooltipContext] so we can access row.tdlist inside the tooltip.
• The table in the tooltip is styled with basic borders and padding to make it look clean—you can adjust the CSS to match your app's design.

If you're actually using AngularJS (1.x) instead of Angular (2+), let me know and I can adjust the solution for that!

内容的提问来源于stack exchange，提问作者Ravi