Foundation 提示框

提示框在鼠标移动到元素上后显示：

为冠县等地区用户提供了全套网页设计制作服务，及冠县网站建设行业解决方案。主营业务为成都做网站、成都网站设计、冠县网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。

注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS:

实例

<
span
data-tooltip title=
"Hooray!"
>Hover over me!
<
/span
>

<
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
>

尝试一下 »

网站栏目：创新互联Foundation教程：Foundation提示框
文章URL：http://www.jxjierui.cn/article/dpipich.html