简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

direktori cari

Foundation 基础 Foundation 教程 Foundation 安装 Foundation 按钮 Foundation 按钮组 Foundation 标签 Foundation 表单 Foundation 表格 Foundation 侧边栏 Foundation 顶部导航栏 Foundation 分页 Foundation 滑动导航 Foundation 滑块 Foundation 价格表 Foundation 进度条 Foundation 均衡器(Equalizer) Foundation 开关 Foundation 列表 Foundation 麦哲伦（Magellan）导航 Foundation Joyride Foundation 面板 Foundation 模态框 Foundation 输入框尺寸 Foundation 提示框 Foundation 提醒框 Foundation 图标 Foundation 图片 Foundation 文本 Foundation 下拉菜单 Foundation 选项卡 Foundation 折叠列表 Foundation 手册 Foundation CSS 参考手册 Foundation CSS 可见性 Foundation 图标参考手册 Foundation 网格 Foundation 块状网格 Foundation 网格 - 大型设备 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格实例 Foundation 网格系统

watak

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>

实例预览 »

关于我们联系我们留言板

手册网

Artikel sebelumnya： Artikel seterusnya：