Foundation - Media Tooltips Basics

Description

Tooltip can be created by using data-tooltip in your <span> tag. By default, tooltip appears below the definition, but you can make your tooltip to appear on left, right or top of the definition.

Example

The following example demonstrates the use of tooltip in Foundation.

Live Demo

<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>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code media_tooltips.html file.
Open this HTML file in a browser, an output is displayed as shown below.

foundation_media.htm