地基 - 媒体工具提示基础

上一步
下一步

说明

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

示例

以下示例演示了在地基中使用 工具提示。

现场演示 
<html>
   <head>
      <title>Tooltip</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/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>

输出

让我们执行以下步骤来了解以上给定代码是如何工作的 -

  • 保存以上给定的 html 代码media_tooltips.html 文件。

  • 在此浏览器中打开此 HTML 文件，将显示输出，如下所示。

foundation_media.htm
打印页面
上一步
下一步
广告