Show Kendo tooltip conditionally in angular 9

Question

I'm trying to show a tooltip on one container class but only if a string variable is populated with some string. Currently, the tooltip is working and it displays the text contained in the string variable.

<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>

How do I display the tooltip only if the 'feedRootObject.tooltipText' has a value in it?

foo . This worked fine for me. When the data part was null, tooltip did not show up. — Balasubramaniam, May 11 '20 at 15:08
It is not quite working for me... If the toolTipText is not defined, then the tooltip says undefined...But i want to say that if it`s undefined, then don`t show the tooltip. — Csibi Norbert, May 11 '20 at 15:17

score 0 · Answer 1 · answered Aug 25 '20 at 10:34

0

You should do something like that: [tooltipTemplate]="feedRootObject.tooltipText ? tooltip : ''"

Worked for me :)

answered Aug 25 '20 at 10:34

Mosh

11

3

Is "worked for me" the only explanation you provide for this code-only answer? – Yunnosch Aug 25 '20 at 10:49
1

Please add some explanation to your answer such that others can learn from it – Nico Haase Aug 25 '20 at 12:20

score 0 · Answer 2 · edited Nov 22 '21 at 21:33

My example is a bit different, but I found this to work in my scenario. I wanted the kendo tooltip popup to show only if a boolean value was true. I ended up using property binding and a conditional statement to achieve my desired outcome.

<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>

I used the showOn property of the kendoTooltip which can take one of three values. https://www.telerik.com/kendo-angular-ui/components/tooltip/api/TooltipDirective/#toc-showon

"hover"
"click"
"none"

My conditional statement of

[showOn]="saveButtonDisabled ? showPopup : dontShowPopup"

corresponds to these variables in your component.ts file.

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

Using all of this together I was able to show the kendoTooltip popup once my variable saveButtonDisabled was true and thus the value for the kendoTooltip property showOn was "hover" and when it was false the kendoTooltip property of showOn was set to "none".

Show Kendo tooltip conditionally in angular 9

2 Answers2