別のDOM要素から1つのDOM要素のスタイリングを制御する方法

こんにちは私は、角材ツールチップの実装をしています。私のスパンを動かすと、ツールチップを見ることができます。私は条件付きでツールチップの背景を変更するにはどうすればよい（例：エラーショー赤の背景、成功ショー緑の背景など）別のDOM要素から1つのDOM要素のスタイリングを制御する方法

コンポーネント：

import { 
    Component, 
    Input, 
    HostBinding, 
    OnInit, 
    ViewEncapsulation, 
    ElementRef, 
    AfterViewInit 
} from '@angular/core'; 

@Component({ 
    selector: 'dbs-tooltip', 
    templateUrl: './tooltip.component.html', 
    styleUrls: ['./tooltip.component.scss'], 
}) 
export class TooltipComponent implements AfterViewInit{ 
    @Input() content: any; 
    @Input() position: any; 
    @Input() type: string; 

    constructor(private elRef:ElementRef) {} 

    ngAfterViewInit() { 
     this.elRef.nativeElement.querySelector('.mat-tooltip'); 
     } 

    getToolTipClass() { 
     if (this.type === 'error') { 
      return 'error-class'; 
     } else if (this.type === 'success') { 
      return 'success-class'; 
     } 
    } 
}

HTML：

<span mdTooltip={{content}} mdTooltipPosition={{position}}> 
    <ng-content></ng-content> 
</span>

CSS：

// md-tooltip-component { 
//  div { 
//  background: red;  
//  } 
// } 


.success-class { 
    md-tooltip-component { 
     div { 
      background: green;  
     } 
     } 

}

いずれかのアイデアですか？あなたの助けを前にありがとう。

出典

2017-10-09 blackdaemon