Latest web development tutorials

財団バルーン

バルーンは、ショーの後の要素の上にマウスを移動します。

我々は、任意の要素を追加することができdata-tooltipメッセージを作成するには、プロパティ。 使用するtitleテキストメッセージのヒントを設定する属性を。

注:スライダはJavaScriptが必要です。 だから、oundationのJSを初期化する必要があります。

<スパンデータ・ツールチップのタイトル= "万歳!">私の上にカーソルを合わせる!</スパン>

<! -初期財団JS - >
<スクリプト>
$(ドキュメント).ready(関数(){
$(ドキュメント).foundation();
})
</スクリプト>

»をお試しください

.has-tipクラスは、マウス太字のテキストを移動することがあります。

<スパンデータ・ツールチップのクラス= "私の上に持っているチップ"タイトル= "万歳!">ホバー!</スパン>

»をお試しください

バルーンの表示位置

デフォルトでは、プロンプトボックスは、エレメントの下部に表示されます。

あなたが使用することができます.tip-top.tip-left.tip-rightまたは.tip-bottomプロンプトボックスの位置を設定する(デフォルト)。

注意:小さな画面サイズでは、バルーンブロードバンドが100%です。

<スパンのデータツールチップクラス= "持っている先端チップトップ」タイトル="万歳! ">トップ</ span>の
<スパンデータ・ツールチップのクラス= "持っているチップの先端下部の" title = "万歳!">下</ span>の
<スパンデータ・ツールチップのクラス= "持っている先端チップ左"タイトル= "万歳!">左</ span>の
<スパンのデータツールチップクラス= "持っているチップ先端から右"タイトル= "万歳!">右</ span>の

»をお試しください

ラウンドバルーン

.radius.roundクラスは、丸みを帯びた先端ボックスを設定するために使用されます。

<スパンデータ・ツールチップのクラス= "持っているチップ"タイトル= "万歳!">デフォルト</ span>の
<スパンのデータツールチップクラス= "持っている先端半径"タイトル= "万歳!">半径</ span>の
<スパンのデータツールチップクラス= "持っているチップラウンド"タイトル= "万歳!">ラウンド</ span>の

»をお試しください