The prompt box is displayed after you move the mouse over the element:
We can add to any element
data-tooltip
Property to create a prompt message. Use
title
Property to set the text of the prompt.
注意: The slider needs to use JavaScript. So you need to initialize Foundation JS: 尝试一下 » By default, the prompt box appears at the bottom of the element. 可以使用 注意: On a small screen, the broadband of the prompt box is 100%. 尝试一下 » 8.27.1. Example ¶
<span data-tooltip title="Hooray!">Hover over me!</span>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
.has-tip
Class can bold the text that the mouse moves: 8.27.2. Example ¶
<span data-tooltip class="has-tip" title="Hooray!">Hover over me!</span>
Prompt box display location ¶
.tip-top
,
.tip-left
,
.tip-right
or
.tip-bottom
(默认) 来设置提示框的位置。 8.27.3. Example ¶
<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>
Fillet prompt box ¶
.radius
And
.round
Class is used to set the fillet prompt box: 8.27.4. Example ¶
<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>