Foundation 基础Foundation 教程Foundation 安装Foundation 按钮Foundation 按钮组Foundation 标签Foundation 表单Foundation 表格Foundation 侧边栏Foundation 顶部导航栏Foundation 分页Foundation 滑动导航Foundation 滑块Foundation 价格表Foundation 进度条Foundation 均衡器(Equalizer)Foundation 开关Foundation 列表Foundation 麦哲伦（Magellan）导航Foundation JoyrideFoundation 面板Foundation 模态框Foundation 输入框 尺寸Foundation 提示框Foundation 提醒框Foundation 图标Foundation 图片Foundation 文本Foundation 下拉菜单Foundation 选项卡Foundation 折叠列表Foundation 手册Foundation CSS 参考手册Foundation CSS 可见性Foundation 图标参考手册Foundation 网格Foundation 块状网格Foundation 网格 - 大型设备Foundation 网格 - 水平堆叠Foundation 网格 - 小型设备Foundation 网格 - 中型设备Foundation 网格实例Foundation 网格系统
©
本文档使用
php.cn手册 发布
文字
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>实例预览 ».has-tip 类可以加粗鼠标移动的文本:
实例
<span data-tooltip class="has-tip" title="Hooray!">Hover over me!</span>实例预览 »
提示框显示位置
默认情况下，提示框会出现在元素的底部。
可以使用 .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>实例预览 »
圆角提示框
.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>实例预览 »
关于我们 联系我们 留言板
手册网