Tooltip
优质
小牛编辑
124浏览
2023-12-01
描述 (Description)
提示可以通过创建data-tooltip您《span》的标签。 默认情况下,提示会出现下面的定义,但你可以让你的提示出现在left , right或top的定义。
例子 (Example)
下面的例子演示了如何使用的tooltip给基金会。
<html>
<head>
<title>Tooltip</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
</head>
<body>
<p>This an example for <span data-tooltip aria-haspopup = "true"
class = "has-tip" data-disable-hover = 'false' tabindex = 1 title = "Below">
Tooltip</span> which displays below.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>This an example for <span data-tooltip aria-haspopup = "true"
class = "has-tip top" data-disable-hover = "false" tabindex = 2
title = "Top">Tooltip</span> which displays on top.
</p>
<p>This an example for <span data-tooltip aria-haspopup = "true"
class = "has-tip right" data-disable-hover = "false" tabindex = "3"
title = "Right">Tooltip</span> which displays right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. This an example for
<span data-tooltip aria-haspopup = "true" class = "has-tip left"
data-disable-hover = "false" tabindex = "4" title = "Left">
Tooltip</span> which displays left.
</p>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>