Tooltip

优质

小牛编辑

125浏览

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>