15

ツールチップと要素の間のスペースがブートストラップから作成/追加される場所がわからないため、何も試していません。通常、ツールチップは、ツールチップイベントをトリガーする要素のすぐ近くにあります。

ツールチップと要素から少しマージンを追加するために、ツールチップを要素から少し離して開きたいと思います。

可能であればcssでこれを行う方法と、可能であれば右、左、上、下の両方のツールチップでこれを行う方法を理解したいと思います。

質問が明確であることを願っています。

これが私のアプリでのツールチップの外観です。

ここに画像の説明を入力してください

これが私がやりたいことであり、その後どのように見えるべきかです。

ここに画像の説明を入力してください

4

4 に答える 4

18

これは、上部のツールチップのデフォルトのCSSです。

.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}

あなたはあなた自身のCSSでそれを上書きすることができます：

.tooltip.top {
  margin-top: -10px;
}

このコードはツールチップの上でのみ機能することに注意してください。CSSを他の3つの方向に適合させる必要があります。

.tooltip.top    { margin-top: -10px; }
.tooltip.right  { margin-left: 10px; }
.tooltip.bottom { margin-top: 10px;   }
.tooltip.left   { margin-left: -10px; }
于 2013-03-24T17:30:44.563 に答える
5

これが完全なBootstrap4ソリューションです

.bs-tooltip-top {
    top: -10px !important;
}

.bs-tooltip-right {
    left: 10px !important;
}

.bs-tooltip-bottom {
    top: 10px !important;
}

.bs-tooltip-left {
    left: -10px !important;
}
于 2019-05-07T09:11:38.707 に答える
4

これはブートストラップ4vで機能します

クラス名は非常に劇的に変更されました。

  • .bs-tooltip-bottom
  • .bs-tooltip-top
  • .bs-tooltip-right
  • .bs-tooltip-left

例：

.bs-tooltip-bottom { 
    margin-top: 10px; 
 }
于 2018-10-28T18:27:01.280 に答える
1

bootstrap.cssには、次のコードがあります。

.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}

.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}

.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}

.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}

マージンを変更またはオーバーライドして、ホバーされた要素からのツールチップの距離を変更します。

IEツールチップの上部の位置に大きな距離を設定するには、.tooltip.top次のようにクラスを設定します。

.tooltip.top {
  padding: 5px 0;
  margin-top: -70px;
}
于 2013-03-24T17:32:19.520 に答える