ツールチップは、_ <span> タグで_data-tooltip_を使用して作成できます。 デフォルトでは、ツールチップは定義の下に表示されますが、ツールチップを定義の_left _、 right_または_top_に表示することもできます。
次の例は、Foundationでの_tooltip_の使用方法を示しています。
<html>
<head>
<title>Tooltip</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
</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>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
