プロジェクトで ngbtooltip を作成しました。基本的には、パディング、色、配置を表示するときにブートストラップ 4 css をオーバーライドしようとしています。
マスター ブートストラップ css を変更する必要がないように、別の css ファイルを使用しようとしています。
私のhtmlファイルは
<div class = 'test123' *ngIf = "config.description" >
<i [ngClass]="_tooltipClass" [placement]="_placement" [ngbTooltip]="config.description"></i>
</div>
私が作成したcssファイルは影響を受けません。代わりに、ツールチップは、ツールチップ用に作成したcssをリッスンするのではなく、マスターcssに依存し続けます。
たとえば、ブートストラップのマスター css ファイルは「text-align:center」を使用しています。これにより、達成しようとしているのは、以下に示す「text-align:right」です。しかし、ブラウザを実行すると。反応するよりも中央にテキストを表示します
.test123 .tooltip-inner {
max-width: $tooltip-max-width;
padding: $tooltip-padding-y $tooltip-padding-x;
color: $tooltip-color;
text-align: right;**
background-color: $tooltip-bg;
@include border-radius($border-radius);
&::before {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}