0

我试图在一个容器类上显示一个工具提示，但前提是字符串变量填充了一些字符串。目前，工具提示正在工作，它显示字符串变量中包含的文本。

<span kendoTooltip [tooltipTemplate]="tooltip" [title]="'Feed'">
<div class="container">
    <div class="row feed-container" (click)="feedClickEvent(feedItem)" *ngFor="let feedItem of feedRootObject.feeds">
        <div class="feed-item">
            <div class="col-sm-4 column-inlineBlock feed-avatar">
                <span>
                    <k-icon [icon]=" { type: 'image', src: '04.png', extraClass: 'feed-icon'}"></k-icon>
                </span>
            </div>
            <div class="col-sm-7 column-inlineBlock main-feed-content">
                <div class="title"><strong>{{feedItem.secondColumn.title}}</strong></div>
                <div class="description">{{feedItem.secondColumn.description}}</div>
                <div class="footer" *ngIf="!feedItem.secondColumn.footer.isTimeAgo">{{feedItem.secondColumn.footer.value}}</div>
                <div class="footer time-ago" *ngIf="feedItem.secondColumn.footer.isTimeAgo">
                    <k-icon [icon]="{type: 'fas', name: feedItem.secondColumn.footer.icon.icon, extraClass: 'icon-clock'}"></k-icon>
                    {{feedItem.secondColumn.value | timeAgo}}
                </div>
            </div>
            <div class="col-sm-1 column-inlineBlock third-col" *ngIf="!isTwoColumn">
                <div class="third-col-wrapper">
                    <span class="icon-indicator {{feedItem.thirdColumn.status}}">
                        <k-icon [icon]="{type: 'fas', name: feedItem.thirdColumn.kIcon.icon, extraClass: 'icon-number'}"></k-icon>
                </span>
                <span class="number-indicator">
                    <strong id="value-indicator">{{feedItem.thirdColumn.value}}</strong>
                </span>
                </div>
            </div>
        </div>
    </div>
</div>
</span>

    <ng-template #tooltip>
        <ng-container *ngIf="feedRootObject.tooltipText">
            {{feedRootObject.tooltipText}}
        </ng-container>
    </ng-template>

仅当“feedRootObject.tooltipText”中有值时，如何显示工具提示？

4

2 回答 2

0

我的示例有点不同，但我发现这适用于我的场景。我希望仅在布尔值为真时才显示剑道工具提示弹出窗口。我最终使用属性绑定和条件语句来实现我想要的结果。

<button
  kendoTooltip
  title="Please Search"
  [showOn]="saveButtonDisabled ? showPopup : dontShowPopup"
  type="button"
  class="k-icon k-i-save"
  [ngClass]="['adminBtn', 'noHover', 'saveButton']"
  (click)="saveQuery()"
  [disabled]="saveButtonDisabled"
></button>

我使用了 kendoTooltip 的 showOn 属性，它可以取三个值之一。 https://www.telerik.com/kendo-angular-ui/components/tooltip/api/TooltipDirective/#toc-showon

  1. “徘徊”
  2. “点击”
  3. “没有任何”

我的条件陈述

[showOn]="saveButtonDisabled ? showPopup : dontShowPopup"

对应于您的 component.ts 文件中的这些变量。

  public saveButtonDisabled: boolean = true;
  public showPopup: ShowOption = "hover";
  public dontShowPopup: ShowOption = 'none'

当我的变量 saveButtonDisabled 为真时，将所有这些一起使用，我能够显示 kendoTooltip 弹出窗口，因此 kendoTooltip 属性 showOn 的值为“悬停”，当它为假时，showOn 的 kendoTooltip 属性设置为“无”。

于 2021-11-22T21:27:36.427 回答
0

你应该这样做： [tooltipTemplate]="feedRootObject.tooltipText ? tooltip : ''"

为我工作:)

于 2020-08-25T10:34:39.513 回答