Foundation 提示框
提示框在鼠標移動到元素上後顯示：
我們可以在任何元素上添加data-tooltip屬性來創建提示信息。 使用title屬性來設置提示信息的文本。
注意:滑塊需要使用JavaScript。 所以你需要初始化oundation JS:
實例
< span data-tooltip title= "Hooray!" > Hover over me! < /span >
<!-- Initialize Foundation JS -->
< script >
$(document).ready(function() {
$(document).foundation();
})
< /script >
<!-- Initialize Foundation JS -->
< script >
$(document).ready(function() {
$(document).foundation();
})
< /script >
嘗試一下»
.has-tip類可以加粗鼠標移動的文本:
提示框顯示位置
默認情況下，提示框會出現在元素的底部。
可以使用.tip-top , .tip-left , .tip-right or .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 >
< 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 >
< span data-tooltip class= "has-tip radius" title= "Hooray!" > Radius < /span >
< span data-tooltip class= "has-tip round" title= "Hooray!" > Round < /span >
嘗試一下»