財団バルーン
バルーンは、ショーの後の要素の上にマウスを移動します。
我々は、任意の要素を追加することができdata-tooltip
メッセージを作成するには、プロパティ。 使用するtitle
テキストメッセージのヒントを設定する属性を。
注:スライダはJavaScriptが必要です。 だから、oundationのJSを初期化する必要があります。
例
<スパンデータ・ツールチップのタイトル= "万歳!">私の上にカーソルを合わせる!</スパン>
<! -初期財団JS - >
<スクリプト>
$(ドキュメント).ready(関数(){
$(ドキュメント).foundation();
})
</スクリプト>
<! -初期財団JS - >
<スクリプト>
$(ドキュメント).ready(関数(){
$(ドキュメント).foundation();
})
</スクリプト>
»をお試しください
.has-tip
クラスは、マウス太字のテキストを移動することがあります。
バルーンの表示位置
デフォルトでは、プロンプトボックスは、エレメントの下部に表示されます。
あなたが使用することができます.tip-top
、 .tip-left
、 .tip-right
または.tip-bottom
プロンプトボックスの位置を設定する(デフォルト)。
注意:小さな画面サイズでは、バルーンブロードバンドが100%です。
例
<スパンのデータツールチップクラス= "持っている先端チップトップ」タイトル="万歳! ">トップ</ span>の
<スパンデータ・ツールチップのクラス= "持っているチップの先端下部の" title = "万歳!">下</ span>の
<スパンデータ・ツールチップのクラス= "持っている先端チップ左"タイトル= "万歳!">左</ span>の
<スパンのデータツールチップクラス= "持っているチップ先端から右"タイトル= "万歳!">右</ span>の
<スパンデータ・ツールチップのクラス= "持っているチップの先端下部の" title = "万歳!">下</ span>の
<スパンデータ・ツールチップのクラス= "持っている先端チップ左"タイトル= "万歳!">左</ span>の
<スパンのデータツールチップクラス= "持っているチップ先端から右"タイトル= "万歳!">右</ span>の
»をお試しください
ラウンドバルーン
.radius
と.round
クラスは、丸みを帯びた先端ボックスを設定するために使用されます。
例
<スパンデータ・ツールチップのクラス= "持っているチップ"タイトル= "万歳!">デフォルト</ span>の
<スパンのデータツールチップクラス= "持っている先端半径"タイトル= "万歳!">半径</ span>の
<スパンのデータツールチップクラス= "持っているチップラウンド"タイトル= "万歳!">ラウンド</ span>の
<スパンのデータツールチップクラス= "持っている先端半径"タイトル= "万歳!">半径</ span>の
<スパンのデータツールチップクラス= "持っているチップラウンド"タイトル= "万歳!">ラウンド</ span>の
»をお試しください