ngブートストラップのツールチップの幅と背景色

Question

ツールチップの幅と背景も変更する必要があります。どうすれば達成できますか？私はangular2とngブートストラップを使用しています。

<i class="fa fa-info-circle info-icon-background" [ngbTooltip]="tooltipContent" aria-hidden="true" ></i> 

「task-modal.component.css」のCSSファイルに次のように書き込んでみましたが、うまくいかないようです。助けてください。私の角度成分で

.tooltip-inner{ 
    width: 400px; 
    background-color: #FFFFFF; 
} 

として、私は、CSSファイルを指定します。私はあなたのコンポーネントのカプセルの外にある要素のスタイルを設定しようとしていると思います

@Component({ 
    selector: 'task-modal', 
    templateUrl: './task-modal.component.html', 
    styleUrls: ['task-modal.component.css'], 
    providers: [TasksService] 
}) 

Answer 1

。

:host >>> .tooltip-inner { 
    width: 400px; 
    background-color: #FFFFFF; 
} 

あなたはまた、次のようにスタイリングのためのコンポーネントのカプセル化を破ることができます。

はこの打撃を与えます。 encapsulation: ViewEncapsulation.Noneしかし、私は個人的にはケースバイケースでそれを壊すことを好む。

@Component({ 
    selector: 'task-modal', 
    templateUrl: './task-modal.component.html', 
    styleUrls: ['task-modal.component.css'], 
    providers: [TasksService], 
    encapsulation: ViewEncapsulation.None 
}); 

参考記事：

http://jira.infor.com/browse/HFC-4016