CODEWITHSUNDEEP
angulartypescriptangular-material
Никита Середа
Никита Середа

Reputation: 2084

Angular Material Tooltip Adding tooltip to self

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>

Upvotes: 0

Views: 310

Answers (1)

burner-account
burner-account

Reputation: 139

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.

Upvotes: 1

Related Questions