Foundation-tooltip-javascript-reference
Foundation-ツールチップJavaScriptリファレンス
説明
Foundationは、以下にリストするツールチップ用のJavaScriptコンポーネントを提供します。
初期化中
このプラグインを使用するには、foundation.core.js _、 foundation.tooltip.js_ファイルをJavaScriptに含める必要があります。 このプラグインには、次のユーティリティライブラリが必要です-
- foundation.util.box.js
- foundation.util.triggers.js
Foundation.Tooltip
新しいツールチップのインスタンスを作成します。
var elem = new Foundation.Tooltip(element);_Tooltip＃event：init_イベントをトリガーし、次のパラメーターを受け入れます。
| Sr.No. | Name & Description | Type |
|---|---|---|
| 1 |
element ツールチップの添付に使用されるjQueryオブジェクトです。 |
jQuery |
| 2 |
options デフォルト設定を拡張するには、このオブジェクトを使用します。 |
Object |
プラグインオプション
これらを使用して、ツールチップのインスタンスをカスタマイズできます。 個別のデータ属性、1つのマージされた_data-options_属性、またはプラグインのコンストラクターに渡されるオブジェクトとして設定できます。 次の表に、Foundationで使用されるプラグインオプションを示します。
| Sr.No. | Name & Description | Example |
|---|---|---|
| 1 |
hoverDelay これは、ホバー時にツールチップを開く必要があるまでの時間をミリ秒単位で表します。 |
200 |
| 2 |
fadeInDuration150 フェードインする時間を表します。 |
150 |
| 3 |
fadeOutDuration これは、表示がフェードアウトする時間を表します。 |
150 |
| 4 |
disableHover trueに設定すると、ホバーイベントがツールチップを開くのを無効にします。 |
false |
| 5 |
templateClasses オプションのツールチップテンプレートに適用する追加のクラス。 |
'my-cool-tip-class' |
| 6 |
tooltipClass ツールチップのテンプレートに追加されたオプションではないクラス。 |
'tooltip' |
| 7 |
triggerClass ツールチップのアンカー要素に適用されるクラス。 |
'has-tip' |
| 8 |
showOn ツールチップを開くブレークポイントの最小サイズ。 |
'small' |
| 9 |
template ツールチップマークアップの作成に使用されるカスタムテンプレート。 |
|
| 10 |
tipText 開くときにツールチップテンプレートに出力されるテキスト。 |
'Some cool space fact here.' |
| 11 |
clickOpen クリックまたはタッチイベントで発生すると、ツールチップを開きます。 |
true |
| 12 |
positionClass JSによって設定される、位置決めのための追加のクラス。 |
'top' |
| 13 |
vOffset これは、テンプレートがY軸のアンカーからプッシュする必要がある距離（ピクセル）を表します。 |
10 |
| 14 |
hOffset これは、テンプレートが横に揃えられたときに、X軸上のアンカーから押し出さなければならない距離（ピクセル）を表します。 |
12 |
イベント
これらのイベントは、ツールチップのプラグインが添付された任意の要素からトリガーされます。 次の表に、イベントと簡単な説明を示します。
| Sr.No. | Name & Description |
|---|---|
| 1 |
tooltip.zf.tooltips ページで開かれている他のすべてのツールチップを閉じるトリガー。 |
| 2 |
show.zf.tooltips ツールチップが表示されるとトリガーします。 |
| 3 |
hide.zf.tooltips ツールチップが非表示になったときにトリガーします。 |
関数
.show
ツールチップを表示し、他のツールチップを閉じるイベントをトリガーします。 _Closeme＃event：tooltip Tooltip＃event：show_イベントをトリガーします。
。隠す
現在のツールチップを非表示にし、衝突のために変更されたときに位置決めクラスをリセットします。 _Tooltip＃event：hide_イベントをトリガーします。
。トグル
静的なshow（）およびhide（）関数に加えて、_。toggle_はトグルメソッドを追加します。
。破壊する
ツールチップインスタンスを破棄し、テンプレート要素がビューから削除されます。
