1

プロジェクトで 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;
  }
}
4

0 に答える 0