Angular Material Tooltip Adding tooltip to self

Question

Can i somehow add tooltip inside component to itself?

For example i have component CallCardComponent with selector "app-call-card"

I can add tooltip from CallsCardsComponent who render many CallCardComponent, but maby it possible make from *.ts file in CallCardComponent.

CallsListComponent:

<div fxLayout="column" fxLayout.gt-sm="row" class="align-content-start">
  <!-- old -->
  <ng-container
    *ngIf="((service.oldCalls$ | async) | callsOrder:service.filters.orderBy:service.filters.orderDirectionAsc) as calls"
  >
    <ng-container *ngIf="calls.length > 0">
      <div
        class="d-inline-block p-2"
        [ngStyle.gt-sm]="'width: ' + 100 / $any(service.callsColumnsCount$ | async) + '%'"
        style="background-color: rgba(255, 0, 0, 0.3)"
      >
        <ng-container *ngFor="let call of calls; let i = index">
          <ng-container [ngSwitch]="call.callType">
            <crm-order-call-card *ngSwitchCase="callType.ORDER" [call]="$any(call)" [class.mt-2]="i > 0"></crm-order-call-card>
            <crm-acat-call-card *ngSwitchCase="callType.ACAT" [call]="$any(call)" [class.mt-2]="i > 0"></crm-acat-call-card>
            <crm-demo-call-card *ngSwitchCase="callType.DEMO" [call]="$any(call)" [class.mt-2]="i > 0"></crm-demo-call-card>
            <crm-online-call-card *ngSwitchCase="callType.ONLINE" [call]="$any(call)" [class.mt-2]="i > 0"></crm-online-call-card>
            <crm-key-call-card *ngSwitchCase="callType.KEY" [call]="$any(call)" [class.mt-2]="i > 0"></crm-key-call-card>
          </ng-container>
        </ng-container>
      </div>
    </ng-container>
  </ng-container>
  <!-- current -->
  <ng-container
    *ngIf="((service.currentCalls$ | async) | callsOrder:service.filters.orderBy:service.filters.orderDirectionAsc) as calls"
  >
    <ng-container *ngIf="calls.length > 0">
      <div
        class="d-inline-block p-2"
        [ngStyle.gt-sm]="'width: ' + 100 / $any(service.callsColumnsCount$ | async) + '%'"
        style="background-color: rgba(54, 155, 255, 0.3)"
      >
        <ng-container *ngFor="let call of calls; let i = index">
          <ng-container [ngSwitch]="call.callType">
            <crm-order-call-card *ngSwitchCase="callType.ORDER" [call]="$any(call)" [class.mt-2]="i > 0"></crm-order-call-card>
            <crm-acat-call-card *ngSwitchCase="callType.ACAT" [call]="$any(call)" [class.mt-2]="i > 0"></crm-acat-call-card>
            <crm-demo-call-card *ngSwitchCase="callType.DEMO" [call]="$any(call)" [class.mt-2]="i > 0"></crm-demo-call-card>
            <crm-online-call-card *ngSwitchCase="callType.ONLINE" [call]="$any(call)" [class.mt-2]="i > 0"></crm-online-call-card>
            <crm-key-call-card *ngSwitchCase="callType.KEY" [call]="$any(call)" [class.mt-2]="i > 0"></crm-key-call-card>
          </ng-container>
        </ng-container>
      </div>
    </ng-container>
  </ng-container>
  <!-- custom -->
  <ng-container
    *ngIf="service?.filters?.customDate &&
    ((service.customCalls$ | async) | callsOrder:service.filters.orderBy:service.filters.orderDirectionAsc) as calls"
  >
    <ng-container *ngIf="calls.length > 0">
      <div
        class="d-inline-block p-2"
        [ngStyle.gt-sm]="'width: ' + 100 / $any(service.callsColumnsCount$ | async) + '%'"
        style="background-color: rgba(0, 128, 0, 0.3)"
      >
        <ng-container *ngFor="let call of calls; let i = index">
          <ng-container [ngSwitch]="call.callType">
            <crm-order-call-card *ngSwitchCase="callType.ORDER" [call]="$any(call)" [class.mt-2]="i > 0"></crm-order-call-card>
            <crm-acat-call-card *ngSwitchCase="callType.ACAT" [call]="$any(call)" [class.mt-2]="i > 0"></crm-acat-call-card>
            <crm-demo-call-card *ngSwitchCase="callType.DEMO" [call]="$any(call)" [class.mt-2]="i > 0"></crm-demo-call-card>
            <crm-online-call-card *ngSwitchCase="callType.ONLINE" [call]="$any(call)" [class.mt-2]="i > 0"></crm-online-call-card>
            <crm-key-call-card *ngSwitchCase="callType.KEY" [call]="$any(call)" [class.mt-2]="i > 0"></crm-key-call-card>
          </ng-container>
        </ng-container>
      </div>
    </ng-container>
  </ng-container>
  <!-- payed -->
  <ng-container *ngIf="(service.payedCalls$ | async) as calls">
    <ng-container *ngIf="calls.length > 0">
      <div
        class="d-inline-block p-2"
        [ngClass.lt-md]="'order-first'"
        [ngStyle.gt-sm]="'width: ' + 100 / $any(service.callsColumnsCount$ | async) + '%'"
        style="background-color: rgba(255, 255, 0, 0.3)"
      >
        <ng-container *ngFor="let call of calls; let i = index">
          <ng-container [ngSwitch]="call.callType">
            <crm-order-call-card *ngSwitchCase="callType.ORDER" [call]="$any(call)" [class.mt-2]="i > 0"></crm-order-call-card>
            <crm-reg-card-call-card *ngSwitchCase="callType.REG_CARD" [call]="$any(call)" [class.mt-2]="i > 0"></crm-reg-card-call-card>
          </ng-container>
        </ng-container>
      </div>
    </ng-container>
  </ng-container>
</div>

Can You type a code snippet? I have an idea but I'm not really sure what You want to exactly do. — Dawid Wekwejt
– Dawid Wekwejt, Commented Jul 26, 2021 at 8:43
i want to somehow add tooltip to crm-*-call-card (all extend from CallCardComponent) — Никита Середа
– Никита Середа, Commented Jul 26, 2021 at 9:59
If I would be You I will create my own directive for tooltip for CallCardComponent — Dawid Wekwejt
– Dawid Wekwejt, Commented Jul 26, 2021 at 11:29

burner-account · Accepted Answer · 2021-07-26 08:45:46Z

1

a) What you want to do is afaik not possible. There is no "host" pseudo-element which you could attach the directive to.

b) You could simply have a top-level div inside the component with width=height=100% to which you attach the directive.

c) Since your control-flow directive (*ngFor?) is most likely outside of the component, why not add the tooltip directive at that level?

I would use c) if possible.

answered Jul 26, 2021 at 8:45

burner-account

1394 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Material Tooltip Adding tooltip to self

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related