ツールチップは、ユーザが要素の上にマウスポインタを移動したときに表示される小さなポップアップボックスです：
ツールチップを作成するには、要素に data-tooltip 属性を追加します。
ツールチップに表示するテキストの指定には、title 属性を使用してください。
注: foundation JS の初期化を忘れないでください：
<span data-tooltip title="Hooray!">Hover over me!</span>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
結果：
.has-tip クラスは、ホバー時に表示されるテキストに点線の下ボーダーを追加します。
テキストは太字になります：
<span data-tooltip class="has-tip" title="Hooray!">Hover over me!</span>
結果：
デフォルトで、ツールチップは要素の下に表示されます。
ツールチップを配置するには、.tip-top、.tip-left、.tip-right または
.tip-bottom (デフォルト) を使用します。
注: 小型画面では、ツールチップは、100％の全幅で一番下に表示されます。
<span data-tooltip class="has-tip tip-top" title="Hooray!">Top</span>
<span data-tooltip class="has-tip tip-bottom" title="Hooray!">Bottom</span>
<span data-tooltip class="has-tip tip-left" title="Hooray!">Left</span>
<span data-tooltip class="has-tip tip-right" title="Hooray!">Right</span>
結果：
.radius と .round クラスは、ツールチップの角に丸みを加えます
<span data-tooltip class="has-tip" title="Hooray!">Default</span>
<span
data-tooltip class="has-tip radius" title="Hooray!">Radius</span>
<span
data-tooltip class="has-tip round" title="Hooray!">Round</span>
結果：