3

Foundation のデフォルトのツールチップは次のようになります。

ここに画像の説明を入力

Web サイトの一部にある小さな三角形を削除したいと考えています。

どこでもそれを取り除くには、foundation_and_overrides.scss ファイル (Rails で Foundation gem を使用していない場合は _settings.scss とも呼ばれます) から $tooltip-pip-size 変数の値を 0 に変更するだけです。

ピップなしで基本ツールチップのカスタム バージョンを定義することは可能ですか?

編集

ここでの難しさは、次のようなものを書くときです

<span data-tooltip class="has-tip tip-bottom" title="Here are my tooltip contents!">extended information</span>

Foundation JavaScript は、実際のツールチップを含むドキュメントの最後に特定の要素を生成します。

<span data-selector="tooltip8vxaud6lxr" class="tooltip tip-bottom" style="visibility: visible; display: none; top: 78px; bottom: auto; left: 50px; right: auto; width: auto;">Here are my tooltip contents!<span class="nub"></span></span>

最初のスパンに追加した Tip-bottom クラスが 2 番目のスパンにコピーされていることがわかりますが、これは、tip-left、tip-right などの基礎固有のクラスの場合のみです。

私がやりたいことは、「no-pip」クラスを最初のスパン (私が実際に書く唯一のもの) に追加し、「ナブ」要素を含む生成されたスパンの外観を変更できるようにすることです。

<span data-tooltip class="has-tip tip-bottom no-pip" title="Here are my tooltip contents!">extended information</span>
4

3 に答える 3

1

displayプロパティをnoneに設定して非表示にするだけです

.tooltip > .nub {
    display: none;
}

スクリーンショットを見る

于 2014-03-14T15:12:52.253 に答える
0

その小さな三角形はちょうどspanクラスnubにありますあなたがする必要があるのはborderそこからcssを削除することだけです。そうすれば小さな三角形のない通常と同じ場所にツールチップがあります

于 2013-06-18T13:20:15.733 に答える
0

を使用version 5すると、ツールヒント テンプレートをカスタマイズできます。

を削除するだけ<span class="nub"></span>です：

  $(document).foundation({
    tooltip: {
      tip_template : function (selector, content) {
        return '<span data-selector="' + selector + '" class="'
          + Foundation.libs.tooltip.settings.tooltip_class.substring(1)
          + '">' + content + '<span class="nub"></span></span>';
      }
    }
  });
于 2015-03-01T02:13:36.507 に答える