将上下文传递给 ngx 的工具提示 bootstrap

Question

我正在使用 ngx-bootstrap 中的工具提示，并希望将数据传递给 ng-template 作为工具提示。文档提供了 [tooltipContext]，但似乎没有用。我提供了一个代码片段。

HTML:

<ng-template #tooltipTmpl let-view="view">
    <div class="tooltip-section">
        <div class="section-title">
            {{ view.dateRangeText }}
        </div>
        <div class="section-text">
            {{ view.data }}
        </div>
    </div>
</ng-template>
<div
    *ngIf="view.isVisible"
    [tooltip]="tooltipTmpl"
    [tooltipContext]="{view: view}"
    containerClass="white-tool-tip"
    placement="top"
                    >
  <div class="sub-title">
    {{ view.title }}
  </div>
</div>

REF：https://valor-software.com/ngx-bootstrap/#/tooltip

Answer 1

我在我的项目中使用了 bootstrap popover，所以建议使用 popover。

此外，在 GitHub 上创建了一个问题，但用户最终使用了弹出框 - https://github.com/valor-software/ngx-bootstrap/issues/4775

Answer 2

我遇到了同样的问题，到目前为止我已经检查了源代码 tooltipContext 标记为已弃用你可以像这样做一个循环

您仍然可以访问 ng-template

中的视图属性

<button type="button" class="btn btn-success"
          *ngIf="view.isVisible"
    [tooltip]="tooltipTmpl">
  Show me tooltip with html {{ view.title }}
</button>

<ng-template #tooltipTmpl>
    <h4>
        {{ view.dateRangeText }}
    </h4>
    <div>
        <i>
      {{ view.data }}
   </i>
    </div>
</ng-template>

demo

已更新

如果你想将我的解决方案与视图数组一起使用，你只需要将 ng-template 移动到 ngFor 的主体。

模板

<ng-container *ngFor=" let view of views">
    <button type="button" class="btn btn-success"
          *ngIf="view.isVisible"
    [tooltip]="tooltipTmpl">
  Show me tooltip with html {{ view.title }}
</button>
    <ng-template #tooltipTmpl>
        <h4>
            {{ view.dateRangeText }}
        </h4>
        <div>
            <i>
      {{ view.data }}
   </i>
        </div>
    </ng-template>
    <br>
    <br>
</ng-container>

demo

Answer 3

@Yiu Pang Chan - 您可以使用以下方法获得视图数组。

在app.component.html文件中

<div *ngFor="let view of views; let i = index">
   <button type="button" class="btn btn-success"
          *ngIf="view.isVisible"
      [tooltip]="tooltipTmpl" on-mouseover="setTooltipData(view)" >
     Show me tooltip with html {{ view.title }}
   </button>
</div>

<ng-template #tooltipTmpl>
    <h4>
        {{ viewDateRangeText }}
    </h4>
    <div>
        <i>
      {{ viewData }}
   </i>
    </div>
</ng-template>

在app.component.ts文件中

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
public viewDateRangeText: string;
public viewData: any;

  setTooltipData(view: any){
    viewDateRangeText = view.dateRangeText;
    viewData = view.data;
  }
}

Answer 4

@rkp9 感谢您提供代码。它确实解决了问题，但它在 TS 代码中添加了 viewDateRangeText、viewData 和 setTooltipData。

我采用了@MuhammedAlbarmavi 建议的方法，因为它没有额外的变量和函数。 Github 上的评论没有我们需要的配置，让弹出窗口像工具提示一样工作。我在下面。

<ng-template #tooltipTmpl let-view="view">
    <div class="tooltip-section">
        <div class="section-title">
            {{ view.dateRangeText }}
        </div>
        <div class="section-text">
            {{ view.data }}
        </div>
    </div>
</ng-template>
<div
   [popoverContext]="{ view: view }"
   [popover]="tooltipTmpl"
   triggers="mouseenter:mouseleave"
   placement="top"
>
  <div class="sub-title">
    {{ view.title }}
  </div>
</div>

将上下文传递给 ngx 的工具提示 bootstrap

Passing context to tooltip of ngx bootstrap

html

javascript

tooltip

ngx-bootstrap

angular