Foundation - 媒体工具提示基础知识

描述

可以使用 <span> 标签中的 data-tooltip 创建工具提示。默认情况下，工具提示显示在定义下方，但您可以让工具提示显示在定义的左侧、右侧或顶部。

示例

以下示例演示了在 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>